1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 border: none; 12 } 13 14 #box { 15 350px; 16 height: 350px; 17 /*background-color: red;*/ 18 margin: 100px 0 0 100px; 19 position: relative; 20 } 21 22 #small_box { 23 100%; 24 height: 100%; 25 border: 1px solid #cccccc; 26 box-sizing: border-box; 27 28 position: relative; 29 } 30 31 #small_box img { 32 100%; 33 height: 100%; 34 } 35 36 #mask { 37 100px; 38 height: 100px; 39 background-color: rgba(255, 255, 0, .4); 40 position: absolute; 41 left: 0; 42 top: 0; 43 cursor: move; 44 /*隐藏*/ 45 display: none; 46 } 47 48 #big_box { 49 600px; 50 height: 600px; 51 border: 1px solid #CCCCCC; 52 /*定位*/ 53 position: absolute; 54 left: 360px; 55 top: 0; 56 57 overflow: hidden; 58 display: none; 59 } 60 61 #big_box img{ 62 position: absolute; 63 left: 0; 64 top: 0; 65 } 66 67 #list { 68 margin: 20px 0 0 100px; 69 } 70 71 #list ul li { 72 float: left; 73 margin: 5px; 74 cursor: pointer; 75 } 76 </style> 77 </head> 78 <body> 79 <div id="box"> 80 <div id="small_box"> 81 <img src="images/pic001.jpg" alt=""> 82 <span id="mask"></span> 83 </div> 84 <div id="big_box"> 85 <img src="images/pic01.jpg" alt=""> 86 </div> 87 </div> 88 <div id="list"> 89 <ul> 90 <li><img src="images/pic0001.jpg" alt=""></li> 91 <li><img src="images/pic0002.jpg" alt=""></li> 92 <li><img src="images/pic0003.jpg" alt=""></li> 93 <li><img src="images/pic0004.jpg" alt=""></li> 94 </ul> 95 </div> 96 97 <script> 98 window.addEventListener('load', function (ev) { 99 // 1. 获取标签 100 var box = document.getElementById('box'); 101 var s_box = box.children[0]; 102 var b_box = box.children[1]; 103 var mask = s_box.children[1]; 104 var b_img = b_box.children[0]; 105 var list_lis = document.getElementById('list').getElementsByTagName('li'); 106 107 // 2. 监听鼠标进入小盒子 108 s_box.addEventListener('mouseover', function (evt) { 109 // 2.1 显示隐藏内容 110 mask.style.display = 'block'; 111 b_box.style.display = 'block'; 112 113 // 2.2 监听鼠标的移动 114 s_box.addEventListener('mousemove', function (evt1) { 115 var e = evt1 || window.event; 116 117 // 2.3 求出鼠标的坐标 让鼠标在盒子中间 118 var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5; 119 var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5; 120 console.log(pointX) 121 122 // 2.4 边界检测 123 if (pointX < 0) { 124 pointX = 0 125 } else if (pointX > s_box.offsetWidth - mask.offsetWidth - 2) { 126 pointX = s_box.offsetWidth - mask.offsetWidth - 2 127 } 128 129 if (pointY < 0) { 130 pointY = 0 131 } else if (pointY > s_box.offsetHeight - mask.offsetHeight - 2) { 132 pointY = s_box.offsetHeight - mask.offsetHeight - 2 133 } 134 135 136 // 2.5 让放大镜走起来 137 mask.style.left = pointX + 'px'; 138 mask.style.top = pointY + 'px'; 139 140 // 2.6 让大盒子中的图片走起来 141 /* 142 smallX / bigX = sBox.width / 大盒子的宽度 143 bigX = smallX / (sBox.width / 大盒子的宽度) 144 */ 145 b_img.style.left = -pointX / (s_box.offsetWidth / b_box.offsetWidth) + 'px'; 146 b_img.style.top = -pointY / (s_box.offsetHeight / b_box.offsetHeight) + 'px'; 147 }); 148 }); 149 150 // 3. 监听鼠标离开小盒子 151 s_box.addEventListener('mouseout', function (evt) { 152 // 2.1 显示隐藏内容 153 mask.style.display = 'none'; 154 b_box.style.display = 'none'; 155 }); 156 157 // 4. 遍历列表的图片 158 for (var i = 0; i < list_lis.length; i++) { 159 (function (i) { 160 var li = list_lis[i]; 161 li.addEventListener('mouseover', function (ev1) { 162 s_box.children[0].src = 'images/pic00'+ (i+1) +'.jpg'; 163 b_img.src = 'images/pic0'+ (i+1) +'.jpg'; 164 }); 165 })(i) 166 } 167 }) 168 </script> 169 </body> 170 </html>