效果图：
源码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin: 0;padding: 0;} img { vertical-align: top; } .box { width: 350px; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 450px; height: 450px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } .big img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box" id="fdj"> <!--小盒子--> <div class="small"> <img src="001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="0001.jpg" alt=""/> </div> </div> </body> </html> <script> var fdj = document.getElementById("fdj"); // 获得最大的盒子 var small = fdj.children[0]; // 获得small 小图片 350盒子 var big = fdj.children[1]; // 获得 大图片 800 盒子 var mask = small.children[1]; // 小的黄色盒子 var bigImage = big.children[0]; // 大盒子里面的图片 small.onmouseover = function() { // 鼠标经过显示出他们 mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function() { mask.style.display = "none"; big.style.display = "none"; } // 鼠标在small 内移动 var x = 0; var y = 0; small.onmousemove = function(event) { var event = event || window.event; x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标 //alert(this.offsetLeft); y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2; if(x < 0) { x = 0; } else if(x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; } if(y<0) { y = 0; } else if(y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; /*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头 问 夫子今天吃了 3个馒头 娇子应该吃几个？ */ /*计算出他们的倍数 4 / 2 2倍 3 * 2 == 6个 */ /* 大图盒子 / 小图盒子 倍数 我们 再小图移动的距离 * 倍数 == 大图的位置*/ bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px"; bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px"; } </script>