放大镜：
1、比例系数要恒定：在系数为4的情况下，若原图是820*512，那么小图必须是205*128，放大镜若是50，原图显示区域必须200
2、计算鼠标在小图中的坐标
3、放大镜需要在鼠标中间位置，也就是鼠标在盒子中的坐标减去其宽度高度的一半
4、放大镜移动范围：marginLeft、marginTop的值必须是0到小图宽度、高度减去放大镜宽度、高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 400px; margin: 150px auto; position: relative; } .small { position: relative; width: 205px; height: 128px; border: 1px solid #CCA55B; } .magnifier { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: #ccc; opacity: 0.3; display: none; cursor: move; } .big { position: absolute; width: 200px; height: 200px; border: 1px solid red; top: 0; left: 215px; display: none; overflow: hidden; } </style> </head> <body> <div class="box"> <div class="small"> <img src="images/nba.jpg" width="205"> <div class="magnifier"></div> </div> <div class="big"> <img src="images/nba.jpg" style="float: left"> </div> </div> <script> var box = document.getElementsByTagName("div")[0]; var samll = box.children[0]; var magnifier = samll.children[1]; var big = box.children[1]; var img = big.children[0]; //1、进入盒子显示，离开隐藏 samll.onmouseenter = function () { magnifier.style.display = "block"; big.style.display = "block"; } samll.onmouseleave = function () { magnifier.style.display = "none"; big.style.display = "none"; } //2、鼠标进入盒子 samll.onmousemove = function (ev) { var pageX = ev.pageX || scroll().left + ev.clientX; var pageY = ev.pageY || scroll().top + ev.clientY; //small.offsetLeft=0，因为他的相对的是box的距离就是0px,所以取box.offsetLeft的值 var x = pageX - box.offsetLeft - magnifier.offsetWidth / 2;//让鼠标在放大镜中间 var y = pageY - box.offsetTop - magnifier.offsetHeight / 2;//让鼠标在放大镜中间 if (x < 0) { x = 0; } //samll.offsetWidth包括了2px的边框 if (x >= samll.offsetWidth - 2 - magnifier.offsetWidth) { x = samll.offsetWidth - 2 - magnifier.offsetWidth; } if (y < 0) { y = 0; } if (y >= samll.offsetHeight - 2 - magnifier.offsetHeight) { y = samll.offsetHeight - 2 - magnifier.offsetHeight; } magnifier.style.left = x + "px"; magnifier.style.top = y + "px"; var xiShu = (big.offsetWidth - 2) / magnifier.offsetWidth;//big.offsetWidth包括了2px边框的宽度 img.style.marginLeft = -xiShu * x + "px"; img.style.marginTop = -xiShu * y + "px"; } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
