仿京东放大镜效果
案例分析：
1.整个案例可以分为三个功能模块；
2.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开时2个盒子隐藏功能；
3.黄色的遮挡层跟随鼠标移动功能；
4.移动黄色遮挡层，大图片跟随移动功能。
效果：
代码：
html部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>仿京东放大镜效果</title> 6 <link rel="stylesheet" href="detail.css"> 7 <script src="detail.js"></script> 8 </head> 9 <body> 10 <div class="preview"> 11 <img src="../图片/iphone.png" alt="" class="preview_img"> 12 <div class="mask"></div> 13 <div class="big"> 14 <img src="../图片/big.jpg" alt="" class="big_img"> 15 </div> 16 </div> 17 </body> 18 </html>
css部分
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 .preview{ 6 width: 250px; 7 height: 250px; 8 border: 1px solid #ebebeb; 9 margin: 50px 0 0 50px; 10 text-align: center; 11 } 12 .preview_img{ 13 position: relative; 14 width: 250px; 15 } 16 .mask{ 17 display: none; 18 position: absolute; 19 width: 150px; 20 height: 150px; 21 background-color: rgba(245, 201, 56, 0.4); 22 top: 0; 23 left: 0; 24 border: 1px solid #ccc; 25 margin: 50px 0 0 50px; 26 cursor: move; 27 } 28 .big{ 29 display: none; 30 position: absolute; 31 width: 600px; 32 height: 600px; 33 left: 450px; 34 top: 20px; 35 z-index: 999; 36 border: 1px solid #ccc; 37 overflow: hidden; 38 } 39 .big_img{ 40 position: absolute; /*添加了定位才可以移动*/ 41 top: 0; 42 left: 0; 43 width: 1000px; 44 }
js部分
1 // 因为是外部的js，所以要等页面加载完毕执行 2 window.addEventListener('load',function(){ 3 var preview = document.querySelector('.preview'); 4 var mask = document.querySelector('.mask'); 5 var big = document.querySelector('.big'); 6 //1.当我们鼠标经过preview就显示和隐藏mask遮挡层和big大盒子 7 preview.addEventListener('mouseover',function(){ 8 mask.style.display = 'block'; 9 big.style.display = 'block'; 10 }) 11 preview.addEventListener('mouseout',function(){ 12 mask.style.display = 'none'; 13 big.style.display = 'none'; 14 }) 15 //2.鼠标移动事件 16 preview.addEventListener('mousemove',function(e){ 17 //(1)先计算出鼠标在盒子内的坐标 18 var x = e.pageX - preview.offsetLeft; 19 var y = e.pageY - preview.offsetTop; 20 //(2)减去盒子宽度和高度的一半(x - mask.offsetWidth / 2) 21 //(3)限制遮挡层移动范围 22 var maskX = x -mask.offsetWidth / 2; 23 var maskY = y -mask.offsetHeight / 2; 24 //遮挡层的最大移动距离 25 var maskMax = preview.offsetWidth - mask.offsetWidth; //因为是正方形，width和height用一个就行 26 if(maskX <= 0){ 27 maskX = 0; 28 }else if(maskX >= maskMax){ 29 maskX = maskMax; 30 } 31 if(maskY <= 0){ 32 maskY = 0; 33 }else if(maskY >= maskMax){ 34 maskY = maskMax; 35 } 36 mask.style.left = maskX + 'px'; 37 mask.style.top = maskY + 'px'; 38 //3.大图片跟随移动功能 39 // 大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离 40 var bigImg = document.querySelector('.big_img'); 41 //大图片最大移动距离 42 var bigMax = big.offsetWidth - bigImg.offsetWidth; 43 //大图片的移动距离 44 var bigX = maskX * bigMax / maskMax; 45 var bigY = maskY * bigMax / maskMax; 46 bigImg.style.left = bigX + 'px'; //这个地方视频上说加-号，我没有加的效果是好的，不清楚？ 47 bigImg.style.top = bigY + 'px'; 48 }) 49 })
