前端 放大镜 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;
}

js代码

// 放大镜
// 要添加放大镜的元素，左边图片大小，右边显示区域大小（对象形式
// {width:xx,height:xx}
// 放大倍数，图片路径
function magnifyingGlass(element, imgSize, showSize, scale, imgSrc) {
    element.classList.add('bigboxGlass');
    let str = `
    <div class="smbox"></div>
    <div class="showbox">
        <img src="${imgSrc}">
    </div>
    `
    // 左边图片大小和路径
    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';
    })
}

效果示意图。
你可以更改一些参数，看看是什么效果