1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * {margin: 0;padding: 0;} 8 img { 9 vertical-align: top; 10 } 11 .box { 12 width: 350px; 13 height: 350px; 14 margin:100px; 15 border: 1px solid #ccc; 16 position: relative; 17 } 18 .big { 19 width: 450px; 20 height: 450px; 21 position: absolute; 22 top: 0; 23 left: 360px; 24 border: 1px solid #ccc; 25 overflow: hidden; 26 display: none; 27 } 28 .mask { 29 width: 100px; 30 height: 100px; 31 background: rgba(255, 255, 0, 0.4); 32 position: absolute; 33 top: 0; 34 left: 0; 35 cursor: move; 36 display: none; 37 } 38 .small { 39 position: relative; 40 }
//因为图片要进行移动，所以必须对其进行定位
41 .big img { 42 position: absolute; 43 top: 0; 44 left: 0; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="box" id="fdj"> 50 <!--小盒子--> 51 <div class="small"> 52 <img src="images/001.jpg" alt=""/> 53 <div class="mask"></div> 54 </div> 55 <div class="big"> 56 <img src="images/0001.jpg" alt=""/> 57 </div> 58 </div> 59 </body> 60 </html> 61 <script> 62 var fdj = document.getElementById("fdj"); // 获得最大的盒子 63 var small = fdj.children[0]; // 获得small 小图片 350盒子 64 var big = fdj.children[1]; // 获得 大图片 800 盒子 65 var mask = small.children[1]; // 小的黄色盒子 66 var bigImage = big.children[0]; // 大盒子里面的图片 67 small.onmouseover = function() { // 鼠标经过显示出他们 68 mask.style.display = "block"; 69 big.style.display = "block"; 70 } 71 small.onmouseout = function() { 72 mask.style.display = "none"; 73 big.style.display = "none"; 74 } 75 // 鼠标在small 内移动 76 var x = 0; 77 var y = 0; 78 small.onmousemove = function(event) { 79 var event = event || window.event; 80 x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标 81 //alert(this.offsetLeft); 82 y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2; 83 if(x < 0) 84 { 85 x = 0; 86 } 87 else if(x > small.offsetWidth - mask.offsetWidth) 88 { 89 x = small.offsetWidth - mask.offsetWidth; 90 } 91 if(y<0) 92 { 93 y = 0; 94 } 95 else if(y > small.offsetHeight - mask.offsetHeight) 96 { 97 y = small.offsetHeight - mask.offsetHeight; 98 } 99 mask.style.left = x + "px"; 100 mask.style.top = y + "px"; 101 /*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头 102 问 夫子今天吃了 3个馒头 娇子应该吃几个？ */ 103 /*计算出他们的倍数 4 / 2 2倍 104 3 * 2 == 6个 */ 105 /* 大图盒子 / 小图盒子 倍数 106 我们 再小图移动的距离 * 倍数 == 大图的位置；big.offsetWidth的大小不是绝对的，只要按照你想让其按照显示的比例就可以*/ 107 bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px"; 108 bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px"; 109 110 } 111 </script>