<!doctype html><html>
<head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0 }
#demo { display: block; width: 400px; height: 586px; margin: 50px; position: relative; }
#small-box { position: relative; z-index: 1; }
#small-box img { width: 400px; height: 586px; }
#float-box { display: none; width: 120px; height: 120px; position: absolute; background: #dcf4ff; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; }
#mark { position: absolute; display: block; width: 400px; height: 586px; 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: 400px; overflow: hidden; border: 1px solid #ccc; z-index: 1; ; }
#big-box img { position: absolute; z-index: 5 } </style> <script> //页面加载完毕后执行 window.onload = function () {
//获取需要的标签 let objDemo = document.getElementById("demo"); let objSmallBox = document.getElementById("small-box"); let objMark = document.getElementById("mark"); let objFloatBox = document.getElementById("float-box"); let objBigBox = document.getElementById("big-box"); let 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) {
let _event = ev || window.event; //兼容多个浏览器的event参数模式 // console.log(_event.clientX);//鼠标到屏幕左侧的距离 // console.log(objDemo.offsetLeft);//外框到屏幕左侧的距离，因为它的父元素为body // console.log(objSmallBox.offsetLeft);//小盒子的margin // console.log(objFloatBox.offsetWidth);//浮块的宽度
let left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; let 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"; //oSmall.offsetLeft的值是相对什么而言 objFloatBox.style.top = top + "px";
//求其比值 let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); let 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="timg.jpg" /> </div> <div id="big-box"> <img src="timg.jpg" /> </div> </div></body>
</html>
转载于:https://www.cnblogs.com/gaowc/p/10701144.html
相关资源：JavaScript实现鼠标移入图片放大效果