web開發實現詳情頁面放大鏡功效
阿新 • • 發佈：2019-01-28
效果如圖：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>首頁</title> <link rel="stylesheet" href="css/detail.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/detail.js"></script> </head> <body> <!--上部 大小圖輪換--> <div id="pagebody_top"> <!--分左右--> <div id="pagebody_top_left"> <div id="bigimglist" > <img src="images/p1.jpg" id="bigimg" onmousemove="onmove();" onmouseout="hiddenobj('targetimgdiv');"> </div> <div id="smallimglist"> <div><img src="images/p1.jpg" id="p1" onmouseover="changeimg();miniimg();"></div> <div><img src="images/p2.jpg" id="p2" onmouseover="changeimg();miniimg();"></div><div><img src="images/p3.jpg" id="p3" onmouseover="changeimg();miniimg();"></div> <div><img src="images/p4.jpg" id="p4" onmouseover="changeimg();miniimg();"></div> </div> </div> <div id="pagebody_top_right" > <!--放大後的圖片區域性--> <div id="targetimgdiv" style="display: none;"> <img id="targetimg" > </div> </div> </div> <!--中部--> <div></div> <!--下部 選單切換--> <div></div> </body> </html>
detail.css:
#pagebody_top{width:750px;border:solid 1px orange;clear: both;} #pagebody_top_left{width:310px;min-height:300px;float:left;border:solid 1px orange;} #pagebody_top_right{width:430px;min-height:300px;float:left;border:solid 1px orange;} #bigimglist{width:310px;height: 310px;} #bigimglist img{width:310px;height: 310px;} #smallimglist div{ width: 60px;height:60px;float:left;border:solid 1px #666666;text-align: center; margin: 3px;} #smallimglist div img{width:50px; height: 50px;} #targetimgdiv{position: relative;border: solid 1px red; width: 400px;height:400px;overflow: hidden;z-index: 1000} #targetimg{ width:600px; height: 600px; }
detail.js:
/*滑鼠懸停事件，停在哪個小圖上顯示哪張大圖 * */ function changeimg(){ var bigimg=document.getElementById("bigimg"); bigimg.src=event.srcElement.src; } //顯示放大後的圖片區域性 function showobj(id){ var obj=document.getElementById(id); obj.style.display="block"; } //隱藏 function hiddenobj(id){ var obj=document.getElementById(id); obj.style.display="none"; } //顯示目標圖片 function miniimg(){ var obj1=document.getElementById("targetimg"); var obj2=document.getElementById(event.srcElement.id); obj1.src=obj2.src; } //區域性顯示 function onmove(){ showobj("targetimgdiv"); miniimg(); //獲取放大鏡圖片物件 var obj=document.getElementById("targetimg"); //獲取滑鼠相對位移 var offx=obj.width/event.srcElement.width; var offy=obj.height/event.srcElement.height; //獲取放大鏡div物件 var div=document.getElementById("targetimgdiv"); //重新設定容器的滾動條 div.scrollLeft=(event.offsetX*offx); div.scrollTop=(event.offsetY*offy); }