前端 放大镜 js
放大镜，就是你随便打开个购物网站，查看商品详情，就会出现了。
具体的原理我不多说，网上很多帖子，我的思路跟这个帖子的一样。
如上图所示，不过放大倍数我搞反了。
不过我把它封装成一个函数，只需要引入css和js文件，并调用函数就好了。
<div class="bigbox"></div><script src="../js/magnifyingGlass.js"></script><script> function callGlass(){//要添加放大镜的元素let element = document.querySelector('.bigbox');//左边图片的大小let imgSize = {width:450,height:450};//右边显示区域的大小let showSize = {width:450,height:450}//放大倍数let scale = 3;//图片路径let imgSrc = "../images/ba2fa682e96b7a60.jpg";magnifyingGlass(element,imgSize,showSize,scale,imgSrc);}callGlass();</script>
像这样子调用就可以了，你可以决定左边图片以及图片大小，右边显示区域大小，放大倍数，和所要添加放大镜的元素。放大镜大小不能改，它等于 “右边显示区域大小”/“放大倍数”。
引入css样式
<link rel="stylesheet" href="../css/magnifyingGlass.css">
css代码
.bigboxGlass {position: relative;box-sizing: border-box;margin: 100px;cursor: move;border: 1px solid #dfdfdf;background-repeat: no-repeat;background-size: 100% 100%;
}.bigboxGlass .smbox {position: absolute;display: none;pointer-events: none;background-color: rgb(174, 177, 176);opacity: 0.5;
}.bigboxGlass .showbox{position: absolute;box-sizing: border-box;display: none;pointer-events: none;top: -1px;border: 1px solid #dfdfdf;overflow: hidden;
}
.bigboxGlass .showbox img{position: absolute;display: block;
}
// 放大镜
// 要添加放大镜的元素，左边图片大小，右边显示区域大小（对象形式
// {width:xx,height:xx}
// 放大倍数，图片路径
function magnifyingGlass(element, imgSize, showSize, scale, imgSrc) {element.classList.add('bigboxGlass');let str = `${imgSrc}">`// 左边图片大小和路径element.insertAdjacentHTML('beforeend', str);element.style.width = imgSize.width + 'px';element.style.height = imgSize.height + 'px';element.style.backgroundImage = `url(${imgSrc})`;// 放大镜大小let glassEle = element.querySelector('.smbox');glassEle.style.width = Number(showSize.width) / Number(scale) + 'px';glassEle.style.height = Number(showSize.height) / Number(scale) + 'px';// 右边显示区域大小let showbox = element.querySelector('.showbox');showbox.style.width = showSize.width + 'px';showbox.style.height = showSize.height + 'px';showbox.style.left = Number(imgSize.width) + 20 + 'px';// 右边图片大小let bigimg = showbox.querySelector('img');bigimg.style.width = Number(imgSize.width) * Number(scale) + 'px';bigimg.style.height = Number(imgSize.height) * Number(scale) + 'px';addmove(element, glassEle, showbox, scale,bigimg);addleave(element,glassEle, showbox);
}function addmove(element, glassEle, showbox, scale,bigimg) {let elementWidth = element.offsetWidth;let elementHeight = element.offsetHeight;// 鼠标相对于大盒子的位置let mouseX, mouseY;// 放大镜的位置 偏移量let x, y;glassEle.style.display = 'block';let glassWidth = glassEle.getBoundingClientRect().width;let glassHeight = glassEle.getBoundingClientRect().height;// console.log(glassEle.getBoundingClientRect());glassEle.style.display = 'none';element.addEventListener('mousemove', function (e) {glassEle.style.display = 'block';mouseX = e.offsetX;mouseY = e.offsetY;x = mouseX - glassWidth * 0.5;y = mouseY - glassHeight * 0.5;x = x <= 0 ? 0 : (x >= elementWidth - glassWidth ? elementWidth - glassWidth : x);y = y <= 0 ? 0 : (y >= elementHeight - glassHeight ? elementHeight - glassHeight : y);glassEle.style.left = x + 'px';glassEle.style.top = y + 'px';moveShowImg(showbox, scale, x, y,bigimg);})
}function moveShowImg(showbox, scale, x, y,bigimg) {showbox.style.display = 'block';// console.log(showbox);bigimg.style.left = -1 * Number(scale) * x + 'px';bigimg.style.top = -1 * Number(scale) * y + 'px';
}function addleave(element,glassEle, showbox){element.addEventListener('mouseleave',function(){glassEle.style.display = 'none';showbox.style.display = 'none';})
}
效果示意图。
你可以更改一些参数，看看是什么效果
