1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{margin: 0;padding: 0;} 10 .box{ 350px;height: 350px;margin: 100px;border: 1px solid black;position: relative;} 11 .big{ 350px;height: 350px;position: absolute;top: 0;left: 360px;overflow: hidden;display: none} 12 .mask{ 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;left: 0;top: 0;display: none;cursor: move;} 13 /* .small{position: relative;} */ 14 .big img{position: absolute;} 15 /* img{display: block;} */ 16 17 </style> 18 </head> 19 <body> 20 <div class="box" id="box"> 21 <div class="small" id="small" > 22 <img src="images/small.jpg" width="350" alt="" /> 23 <div class="mask" id="mask"></div> 24 </div> 25 <div class="big" id="big" > 26 <img src="images/big.jpg" width="800" alt="" id="img" /> 27 </div> 28 </div> 29 <script> 30 //1 获取节点 31 var boxObj = document.getElementById('box'); 32 var smallObj = document.getElementById('small'); 33 var maskObj = document.getElementById('mask'); 34 var bigObj = document.getElementById('big'); 35 var imgObj = document.getElementById('img'); 36 //2 鼠标移入移出事件 37 smallObj.onmouseenter = function(){ 38 maskObj.style.display = 'block'; 39 bigObj.style.display = 'block'; 40 } 41 smallObj.onmouseleave = function(){ 42 maskObj.style.display = 'none'; 43 bigObj.style.display = 'none'; 44 } 45 //3 黄色盒子在小图片中的位置 46 smallObj.onmousemove = function(eve){ 47 var e = eve || window.event; 48 //mask 位置 49 var targetX = e.clientX - boxObj.offsetLeft - maskObj.offsetWidth/2; 50 var targetY = e.clientY - boxObj.offsetTop - maskObj.offsetHeight/2; 51 //限制边界 52 var maxX = smallObj.offsetWidth - maskObj.offsetWidth; 53 var maxY = smallObj.offsetHeight - maskObj.offsetHeight; 54 targetX = targetX < 0 ? 0 : targetX; 55 targetX = targetX > maxX ? maxX : targetX; 56 targetY = targetY < 0 ? 0 : targetY; 57 targetY = targetY > maxY ? maxY : targetY; 58 //mask 实时位置 59 mask.style.left = targetX + 'px'; 60 mask.style.top = targetY + 'px'; 61 62 /*******大图的位置显示*******/ 63 var imgX = targetX / maxX * (imgObj.offsetWidth - bigObj.offsetWidth); 64 var imgY = targetY / maxY * (imgObj.offsetHeight - bigObj.offsetHeight); 65 imgObj.style.left = -imgX + 'px'; 66 imgObj.style.top = -imgY + 'px'; 67 } 68 </script> 69 </body> 70 </html>