- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/03/23 15:53作者：查瑜舜人气：
制作放大镜，首先必须要掌握常见的六大尺寸值。如果这六个值不太熟悉的话，可能有点吃力，不过下图已经分析的很清楚了，应该能看懂。需要注意的一点是，除了鼠标位置是按照窗口来进行定位的，如图绿色画线，其他四项尺寸值是按照父元素——子元素关系来计算尺寸，如body和div1，div1和div2 。
offsetLeft和style.left主要有三点不同：
现在来分析：当放大镜（鼠标）在小图片上移动 x 距离时，大图片移动的距离Y是多少呢？
其实根据 等比 关系，有图中的关系：
下图中关系式，其实就是由核心公式转化而来：X/?=B/D=A/C.
（为了方便，只讨论单方向和横轴方向距离）
X:放大镜向左移动的距离；
?：大图片向右（反方向）移动的距离；
A：放大镜的宽；
B：小容器的宽，为了兼容，实际为mark的宽，不过与小容器宽相等的；
C：大容器的宽；
D：大图片的宽；
图中数字代表距离，则x的值应该如下计算：
上面就是放大镜核心原理。明白了原理后，对于放大镜的移动范围，浏览器的兼容性等细节再进行优化可以咯。
代码还是要贴上来的：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0 } // 最外层，包裹所有元素 #demo { display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } // 小容器 #small-box { position: relative; z-index: 1; } // 放大镜 #float-box { display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; } // 为了兼容IE，把添加在小图片的特性全部移到mark #mark { position: absolute; display: block; width: 400px; height: 255px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; } // 大容器 #big-box { display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; ; } // 大图片 #big-box img { position: absolute; z-index: 5 } </style> <script> //页面加载完毕后执行 window.onload = function() { var objDemo = document.getElementById("demo"); var objSmallBox = document.getElementById("small-box"); var objMark = document.getElementById("mark"); var objFloatBox = document.getElementById("float-box"); var objBigBox = document.getElementById("big-box"); var objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; // 鼠标移入时触发的事件 objMark.onmouseover = function() { objFloatBox.style.display = "block" objBigBox.style.display = "block" } // 鼠标离开时触发的事件 objMark.onmouseout = function() { objFloatBox.style.display = "none" objBigBox.style.display = "none" } // 鼠标在小图片上移动时触发的事件 objMark.onmousemove = function(ev) { // 兼容浏览器 var _event = ev || window.event; // 鼠标移动的 变化距离 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; // 把放大镜限制在小容器内 if (left < 0) { left = 0; } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) { left = objMark.offsetWidth - objFloatBox.offsetWidth; } if (top < 0) { top = 0; } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) { top = objMark.offsetHeight - objFloatBox.offsetHeight; } //放大镜跟随鼠标发生移动后的当前位置 objFloatBox.style.left = left + "px"; objFloatBox.style.top = top + "px"; //发生移动后，产生的 等比例 关系。 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight); //利用等比例关系计算 大图片 反向 移动的距离 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px"; } } </script> </head> <body> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="macbook-small.jpg" /> // 这张是小图片。 </div> <div id="big-box"> <img src="macbook-big.jpg" /> // 这张是大图片。 </div> </div> </body> </html>这张是小图片，可以下载后置于源码中使用。
这张是大图片，可以下载后置于源码中使用。
