案例：高清放大镜
分3步
1. 鼠标进入和离开，显示和隐藏遮挡层和大图div
2. 鼠标在小层上移动，鼠标横纵坐标，为可视区域坐标-遮挡层的宽高，鼠标移动的时候，在一个区域内移动，需要判断和定义下移动区间
3. 在小图移动，对应大图的坐标，用比例来做 a/b =c/d ，a=bc/d
4. 移动设置，用大图的marginleft和top实现，负的移动距离
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>哈哈</title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } </style> </head> <body> <div class="box" id="box"> <div class="small"> <!--小层--> <img src="images/small.png" width="350" alt="" /> <div class="mask"></div> <!--遮挡层--> </div> <!--小图--> <div class="big"> <!--大层--> <img src="images/big.jpg" width="800" alt="" /> <!--大图--> </div> <!--大图--> </div> <!--导入外部的js文件--> <script src="common.js"></script> <script> //获取需要的元素 var box = my$("box"); //获取小图的div var small = box.children[0]; //遮挡曾 var mask = small.children[1]; //获取大图的div var big = box.children[1]; //获取大图 var bigImg = big.children[0]; //鼠标进入显示遮挡层和大图的div box.onmouseover = function () { mask.style.display = "block"; big.style.display = "block"; }; //鼠标离开隐藏遮挡层和大图的div box.onmouseout = function () { mask.style.display = "none"; }; //鼠标的移动事件---鼠标是在小层上移动 small.onmousemove = function (e) { //鼠标此时的可视区域的横坐标和纵坐标 //设置鼠标在遮挡层的中间显示 var x = parseInt(e.clientX - mask.offsetWidth / 2); var y = parseInt(e.clientY - mask.offsetHeight / 2); //设置margin的100px的问题 （先让鼠标在遮挡层左上角显示） x = x - 100; y = y - 100; //横坐标的最小值 x = x < 0 ? 0 : x; //纵坐标的最小值 y = y < 0 ? 0 : y; //横坐标的最大值 x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x; //纵坐标的最大值 y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y; //为遮挡层的left和top赋值 mask.style.left = x + "px"; mask.style.top = y + "px"; //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离 //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离 //大图的横向最大移动距离 var maxX = bigImg.offsetHeight - big.offsetHeight; //大图的纵向最大移动距离 // var maxY = bigImg.offsetHeight - big.offsetHeight; //大图的横向移动坐标 var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth); //大图的纵向移动坐标 var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth); //设置图片的移动 bigImg.style.marginLeft = -bigImgMoveX + "px"; bigImg.style.marginTop = -bigImgMoveY + "px"; }; </script> </body> </html>