实现放大镜特效的要点是定位，缩放计算公式：
缩放计算公式：smallX/bigX=small_box.width/big_img.width;
以下是放大镜案例的代码：
html代码：
<!DCOTYPE html> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <style link="style.css"></style> <script src="index.js"></script> </head> <body> <div> <div id="small_box"> <img src="./images/pic01.jpg"> <span id="mask"></span> </div> <div id="big_box"> <img src="./images/pic1.jpg"> </div> </div> <div id="list_box"> <img src="./images/pic001.jpg"> <img src="./images/pic002.jpg"> <img src="./images/pic003.jpg"> </div> </body> </html>
style.css:
*{ padding: 0; margin: 0; border: 0; } body{ background-color: #e8e8e8; } img{ vertical-align: top; } #box{ width: 350px; height: 350px; border: 1px solid #ccc; box-shadow: 0 0 10px #000; margin: 100px 0 0 100px; position: relative; } #box #small_box{ width: 350px; height: 350px; position: relative; } #small_box img{ width: 350px; height: 350px; } #big_box{ width: 600px; height: 600px; border: 1px solid #ccc; box-shadow: 0 0 10px blue; float: left; position: absolute; top: 0; left: 360px; overflow: hidden; display: none; } #list_box{ width: 348px; height: 50px; margin-left: 100px; } #list_box img{ border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; box-shadow: 0 0 10px #000; } #mask{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: rgba(225,0,0,.2); cursor: move; display: none; }
index.js:
window.onload=function(){ //获取需要操作的标签 let box=$("box"); let small_box=box.children[0]; let small_img=small_box.children[0]; let mask=small_box.children[1]; let big_box=box.children[1]; let big_img=big_box.children[0]; let list_box=$("list_box"); let imgs=list_box.children; //监听鼠标进入小盒子 small_box.onmouseover=function(){ //将隐藏的元素显示 mask.style.display="block"; big_box.style.display="block"; } //监听鼠标在小盒子中移动事件 small_box.onmousemove=function(event){ let e=event||window.event; //获取鼠标的坐标,并将鼠标的位置固定在mask中心 let pointX=e.clientX-box.offsetLeft-mask.offsetWidth*0.5; let pointY=e.clientY-box.offsetTop-mask.offsetHeight*0.5; //检测边界，看mask是否超出边界 if(pointX<0){ pointX=0; }else if(pointX>=small_box.offsetWidth-mask.offsetWidth){ pointX=small_box.offsetWidth-mask.offsetWidth; } if(pointY<0){ pointY=0; }else if(pointY>=small_box.offsetHeight-mask.offsetHeight){ pointY=small_box.offsetHeight-mask.offsetHeight; } //让小盒子动起来 mask.style.left=pointX+"px"; mask.style.top=pointY+"px"; //让大盒子进行缩放 /* 缩放公式：smallX/bigX=small_box.width/big_img.width 可推算出大图移动的距离： bigX=-smallX/(small_box.width/big_img.width); */ big_img.style.left=-pointX/(small_box.offsetWidth /big_img.offsetWidth)+"px"; big_img.style.top=-pointY/(small_box.offsetHeight /big_img.offsetHeight)+"px"; } //监听鼠标移出小盒子事件 small_box.onmouseout=function(){ mask.style.display="none"; big_box.style.display="none"; } //遍历list_box，为每张小图绑定一个鼠标移入事件 for(let i=0;i<imgs.length;i++){ let img=imgs[i]; img.onmouseover=function(){ //使用闭包处理同步和异步的问题 (function(index){ small_img.src="./images/pic00"+(index+1)+".jpg"; big_img.src="./images/pic0"+(index+1)+".jpg"; })(i) } } } function $(id){ return typeof id==="string"?document.getElementById(id):null; }