大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果。今天闲着没事干，就打算复习一下JavaScript基础，用一下基础知识制作一个类似于淘宝的放大镜效果。
先说一下这个效果需要用到的一些基础知识：
css相对定位：position：absolute；
鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个出现
获取鼠标点击坐标：X轴：clientX，Y轴：clientY
当前元素相对于父元素的左位移：offsetLeft
当前元素相对于父元素的上位移：offsetTop
当前元素的实际高、宽度（不包括滚动条）：offsetWidth、offsetHeight
球当前元素的最小值，最大值：Math.min()、Math.max()；
话不多说直接上代码吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #demo{ display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #float-box{ position: relative; z-index: 1; } #small-box{ display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; cursor: move; } #big-box{ display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; } #big-box img{ position: absolute; z-index: 5; } </style> </head> <body> <div> <div> <div></div> <img src="https://www.jb51.net/images/macbook-small.jpg"> </div> <div> <img src="https://www.jb51.net/images/macbook-big.jpg"> </div> </div> <script type="text/javascript"> window.onload = function(){ //获取到需要的元素 var demo = document.getElementById('demo'); var smallBbox = document.getElementById('small-box'); var floatBox = document.getElementById('float-box'); var bigBox = document.getElementById('big-box'); var bigBoxImg = bigBox.getElementsByTagName('img')[0]; floatBox.onmouseover = function(){ smallBbox.style.display = "block"; bigBox.style.display = "block"; } floatBox.onmouseout = function(){ smallBbox.style.display = "none"; bigBox.style.display = "none"; } floatBox.onmousemove = function(e){ var _event = e || event; console.log(_event.clientY); var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//除2是因为让鼠标点出现在放大遮罩的中心位置 var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight/2; var demoWidth = demo.offsetWidth; var demoHeight = demo.offsetHeight; var smallBboxWidth = smallBbox.offsetWidth; var smallBboxHeight = smallBbox.offsetHeight; //鼠标可以移动的最大XY的距离 var maxX = demoWidth - smallBboxWidth; var maxY = demoHeight - smallBboxHeight; l = Math.min(maxX,Math.max(0,l)); t = Math.min(maxY,Math.max(0,t)); smallBbox.style.left = l +"px"; smallBbox.style.top = t +"px"; var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//求出小图遮罩的坐标占可移动区域的比例 var percentY = t / (floatBox.offsetHeight - smallBboxHeight); bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//大图对的移动方向和小图遮罩的移动方向相反 bigBoxImg.style.top = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px"; } } </script> </body> </html>