现在很多网站上都用到了放大镜的效果，尤其是购物网站。下面就看看怎么实现吧
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>放大镜</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0 11 } 12 13 #demo { 14 display: block; 15 400px; 16 height: 586px; 17 margin: 50px; 18 position: relative; 19 } 20 21 #small-box { 22 position: relative; 23 z-index: 1; 24 } 25 26 #small-box img { 27 400px; 28 height: 586px; 29 } 30 31 #float-box { 32 display: none; 33 120px; 34 height: 120px; 35 position: absolute; 36 background: #dcf4ff; 37 border: 1px solid #ccc; 38 filter: alpha(opacity=50); 39 opacity: 0.5; 40 } 41 42 #mark { 43 position: absolute; 44 display: block; 45 400px; 46 height: 586px; 47 background-color: #fff; 48 filter: alpha(opacity=0); 49 opacity: 0; 50 z-index: 10; 51 } 52 53 #big-box { 54 display: none; 55 position: absolute; 56 top: 0; 57 left: 460px; 58 400px; 59 height: 400px; 60 overflow: hidden; 61 border: 1px solid #ccc; 62 z-index: 1; 63 ; 64 } 65 66 #big-box img { 67 position: absolute; 68 z-index: 5 69 } 70 </style> 71 <script> 72 //页面加载完毕后执行 73 window.onload = function () { 74 75 //获取需要的标签 76 let objDemo = document.getElementById("demo"); 77 let objSmallBox = document.getElementById("small-box"); 78 let objMark = document.getElementById("mark"); 79 let objFloatBox = document.getElementById("float-box"); 80 let objBigBox = document.getElementById("big-box"); 81 let objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; 82 83 //鼠标悬浮时，浮块和右侧放大镜显示 84 objMark.onmouseover = function () { 85 objFloatBox.style.display = "block" 86 objBigBox.style.display = "block" 87 } 88 //鼠标离开后，浮块和右侧放大镜隐藏 89 objMark.onmouseout = function () { 90 objFloatBox.style.display = "none" 91 objBigBox.style.display = "none" 92 } 93 94 //鼠标在遮罩层移动时 95 objMark.onmousemove = function (ev) { 96 97 let _event = ev || window.event; //兼容多个浏览器的event参数模式 98 // console.log(_event.clientX);//鼠标到屏幕左侧的距离 99 // console.log(objDemo.offsetLeft);//外框到屏幕左侧的距离，因为它的父元素为body 100 // console.log(objSmallBox.offsetLeft);//小盒子的margin 101 // console.log(objFloatBox.offsetWidth);//浮块的宽度 102 103 let left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; 104 let top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; 105 106 //设置边界处理，防止移出小图片 107 if (left < 0) { 108 left = 0; 109 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) { 110 left = objMark.offsetWidth - objFloatBox.offsetWidth; 111 } 112 113 if (top < 0) { 114 top = 0; 115 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) { 116 top = objMark.offsetHeight - objFloatBox.offsetHeight; 117 118 } 119 120 objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言 121 objFloatBox.style.top = top + "px"; 122 123 //求其比值 124 let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); 125 let percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight); 126 127 //方向相反，小图片鼠标移动方向与大图片相反，故而是负值 128 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; 129 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px"; 130 } 131 } 132 </script> 133 </head> 134 135 <body> 136 <div id="demo"> 137 <div id="small-box"> 138 <div id="mark"></div> 139 <div id="float-box"></div> 140 <img src="timg.jpg" /> 141 </div> 142 <div id="big-box"> 143 <img src="timg.jpg" /> 144 </div> 145 </div> 146 </body> 147 148 </html>