使用js实现放大镜功能
作者:互联网
ps:放大镜的功能
记得下载本文最后的图片然后修改相应的文件路径!!
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } .box img { vertical-align: top; } #bigBox>img { /*是让里面的图片脱标,为的就是让里面的图片进行一个移动*/ position: absolute; } </style> </head> <body> <div class="box" id="box"> <div class="small" id="smallBox"> <img src="../images/01.jpg" width="350" alt="" /> <div class="mask" id="mask"></div> </div> <div class="big" id="bigBox"> <img id="bigImg" src="../images/01.jpg" width="800" alt="" /> </div> </div> <script> //1.获取元素 let smallBox = document.getElementById('smallBox'); //小盒子 let mask = document.getElementById('mask'); //遮罩 let bigBox = document.getElementById('bigBox'); //大盒子 let bigImg = document.getElementById('bigImg'); //大图片 let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离 //2.注册事件 //2.1 鼠标移入 smallBox.onmouseover = function () { //3.事件处理:显示big大图片盒子和mask遮罩盒子 bigBox.style.display = 'block'; mask.style.display = 'block'; }; //2.2 鼠标移出 smallBox.onmouseout = function () { //3.事件处理:隐藏big大图片盒子和mask遮罩盒子 bigBox.style.display = 'none'; mask.style.display = 'none'; }; //2.3 鼠标移动 smallBox.onmousemove = function (e) { e = e || window.event; //3.事件处理: //a.遮罩mask跟随鼠标移动 let x = e.pageX - box.offsetLeft; let y = e.pageY - box.offsetTop; //b.鼠标在mask中心位置 x -= mask.offsetWidth / 2; y -= mask.offsetHeight / 2; //边界检测 x = x < 0 ? 0 : x; x = x > 175 ? 175 : x; y = y < 0 ? 0 : y; y = y > 175 ? 175 : y; mask.style.left = x + 'px'; mask.style.top = y + 'px'; //d.bigImg相应移动 bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px'; bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px'; }; </script> </body> </html>
标签:box,功能,放大镜,mask,style,js,let,bigBox,display 来源: https://www.cnblogs.com/xiaohanxqh/p/15588581.html