原生js實現圖片詳情頁面放大鏡
阿新 • • 發佈：2018-12-14
最近的網站專案需要實現這個放大鏡，在網上也下載了一些實現了的程式碼，不過感覺比較笨重，就自己寫了一次，實現了，需要的朋友可以拿去用;
以下是html部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/fdj.css" /> <script src="js/fdj.js"></script> </head> <body> <div id='bigDiv' class='clearfix'> <div class='left_div'> <div id='mid_div'> <img src="images/detail_img/image1.jpg" alt="" /> <div id='gai'></div> </div> <div id='min_div' class='clearfix'> <img src="images/detail_img/image1.jpg" alt="" data-num='1'/> <img src="images/detail_img/image2.jpg" alt="" data-num='2'/> <img src="images/detail_img/image3.jpg" alt="" data-num='3'/> <img src="images/detail_img/image4.jpg" alt="" data-num='4'/> <img src="images/detail_img/image5.jpg" alt="" data-num='5'/> </div> </div> <div id='max_div'> <img src="images/detail_img/image1.jpg" alt="" /> </div> </div> </body> </html>
以下是css部分：
*{ margin:0; padding:0; } /*去掉浮動*/ .clearfix:after{ height:0; content:" "; display:block; overflow:hidden; clear:both; } .clearfix{ zoom:1;/*IE低版本瀏覽器不支援after偽類所以要加這一句*/ } #bigDiv img{ display:block; } #bigDiv{ overflow:hidden; background:pink; } /*左盒子*/ .left_div{ float:left; } /*中盒子*/ #mid_div{ width:350px; height:350px; border:8px solid #ccc; position:relative;/*相對定位*/ } #mid_div img{ width:100%; } #gai{ width:100px; height:100px; background:rgba(67,98,230,0.4); position:absolute;/*子絕父相*/ display:none; } /*大盒子*/ #max_div{ float:left; position:relative;/*相對定位*/ border:4px solid #ccc; overflow:hidden; display: none; } #max_div img{ /*子絕父相*/ position:absolute; } /*小盒子*/ #min_div{ /*float:left;*/ width:350px; } #min_div img{ float:left; width:20%; }
以下是js部分：
window.onload = function(){ // 預載入 new Image().src='images/detail_img/image1.jpg'; new Image().src='images/detail_img/image2.jpg'; new Image().src='images/detail_img/image3.jpg'; new Image().src='images/detail_img/image4.jpg'; new Image().src='images/detail_img/image5.jpg'; var bigDiv = document.getElementById('bigDiv'), mid_div = document.getElementById('mid_div'), mid_img = mid_div.children[0], gai = mid_div.children[1], min_div = document.getElementById('min_div'), min_imgs = min_div.children, max_div = document.getElementById('max_div'), max_img = max_div.children[0]; // 滑鼠放上小的img上 中盒子和大盒子都需要更換圖片的src console.log(min_imgs.length,min_imgs) for(var i=0,len=min_imgs.length;i<len;i++){ (function(j){ min_imgs[j].onmouseenter = function(){ var img_src = this.src; mid_img.src = img_src; max_img.src = img_src; } })(i) } // 滑鼠放上顯示gai 移開隱藏 mid_div.onmouseenter = function(){ gai.style.display = 'block'; max_div.style.display = 'block'; }; mid_div.onmouseleave = function(){ gai.style.display = 'none'; max_div.style.display = 'none'; }; //相容的滑動位置 madeby:張飛龍 // 滾動條的畫素相容寫法 window.scroll = function(){ return { "top":document.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, "left":document.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft } } // 在中盒子上滑動的時候 需要獲取滑鼠在mid_div中的座標位置 mid_div.onmousemove = function(event){ event = event || window.event; //獲取滑鼠在文件中的座標位置 = 滾動條的px+距離瀏覽器邊的px var pageX = event.pageXOffset || window.scroll().left + event.clientX; var pageY = event.pageYOffset || window.scroll().top + event.clientY; //console.log(pageX,pageY) //mid_div盒子相對於有定位的父盒子的位置；沒有定位的盒子則為body var mid_divX = mid_div.offsetLeft, mid_divY = this.offsetTop; //console.log(mid_divX,mid_divY) //讓gai盒子的位置和滑鼠一起動起來，最好滑鼠的在gai中心位置, //X為gai盒子的位置，等於滑鼠相對body的位置-mid_div的盒子相對body的位置-gai盒子自身寬度的一半 var X = pageX - mid_divX - gai.offsetWidth/2; var Y = pageY - mid_divY - gai.offsetHeight/2; //console.log(X,Y) // 設定邊界 if(X<=0){X=0}; if(Y<=0){Y=0}; var max_left = mid_div.scrollWidth-gai.offsetWidth; var max_top = mid_div.scrollHeight - gai.offsetWidth; if(X>=max_left){ X = max_left; } if(Y>=max_top){ Y = max_top; } // 設定位置 gai.style.left = X + 'px'; gai.style.top = Y + 'px'; // 大盒子的大小應該計算出來，和gai盒子等比例就很好了，這樣設計比較好 var biliX = gai.offsetWidth/mid_div.scrollWidth; var biliY = gai.offsetHeight/mid_div.scrollHeight; max_div.style.width = biliX * max_img.offsetWidth + 'px'; max_div.style.height = biliY * max_img.offsetHeight + 'px'; var bili = mid_div.scrollWidth/max_img.offsetWidth; //console.log(bili) max_img.style.left = -X/bili + 'px'; max_img.style.top = -Y/bili + 'px'; }; }
感覺現在的csdn粘程式碼越來越醜了。