实现鼠标控制小图选区，大图同步放大预览的JavaScript技术解析,-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63656102/article/details/130115511

先看一下最终结果:

看完最终效果大家应该就知道是什么意思

先看一下要做出这个效果需要什么算法的实现？

首先是得知道鼠标距离这个图片的距离是多少才行

怎么来求这一段距离呢？

其实很简单，我们只需要知道鼠标距离html文档的距离减去水果盒子到页面的距离就可以得到鼠标到水果盒子边的距离

所以e.pageX可以得到鼠标距离html文档的距离

盒子.offsetLeft可以得到水果盒子到页面的距离

两个相减就可以得到最终的结果

const x = e.pageX - small.offsetLeft;

这个距离我们就得到了，那么你会求鼠标到盒子上边的距离怎么求吗？

其实和刚才的操作是一样的，就不细说了

那么第一步就完成了，之后来做比较关键的一步，首先我们得知道黄色框得跟着我们的鼠标来移动

有js基础的同学应该是知道的，所以直接上代码了

mask.style.left=x-(mask.offsetWidth/2)+"px";
mask.style.top=y-(mask.offsetHeight/2)+"px";

上面代码就是求黄色框跟随鼠标移动

然后我们基本的以及完成了，最后就是鼠标移动的时候，大的效果图是怎么移动的呢？

首先先分析一下：

大的效果图也是根据黄色区域框的内容来显示我们要看到的区域内容的，所以他们之间是存在一个关系的，那就是倍数关系(根据自己的实际情况来确定倍数)我这里是两倍的关系，知道倍数关系后，在分析一下，首先黄色框移动100px的距离的话，那么大的效果图是不是要移动200px？答案是肯定的，因为是两倍的关系，所以得到一个公式：

大图所移动的位置=mask的移动距离*大图的最大移动距离/mask的最大移动距离

推出公式后那么也就解决的这个效果的核心功能问题

然后就可以来看看完整代码情况:

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="水果.css">
    <script src="水果.js"></script>
</head>
<body>
    <div class="box">
        <div class="small">
            <img src="images/small.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="images/big.jpg" alt="">
        </div>
    </div>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
}
.box{
    /* width: 100%;
    height: 900px;
    background-color: #000; */
}
.small{
    position: relative;
    width: 350px;
    height: 350px;
    border: 1px solid #ccc;
}
.mask{
    display: none;
    width: 175px;
    height: 175px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: yellow;
    opacity: 0.4;
    cursor: move;
}
.big{
    display: none;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 360px;
    top: 0;
    overflow: hidden;
}
.big img{
    position: absolute;
    top: 0;
    left: 0;
}

js：

window.addEventListener("load",function(){
    let small = document.querySelector(".small");
    let mask = document.querySelector(".mask");
    let Big = document.querySelector(".big");
    let big = document.querySelector(".big img");
    // console.log(small);
    // console.log(mask);
    // console.log(big);
    small.addEventListener("mousemove",()=>{
        mask.style.display="block";
        Big.style.display="block";
    })
    small.addEventListener("mouseout",()=>{
        mask.style.display="none";
        Big.style.display="none";
    });
    small.addEventListener("mousemove",(e)=>{
        //  console.log(e.pageX);
        //  console.log(e.pageY);
        // console.log(small.offsetLeft);
        const x = e.pageX - small.offsetLeft;
        const y = e.pageY - small.offsetTop;
        // console.log(x);
        // console.log(y);
        // console.log((Number(mask.offsetHeight)/2));
        
        mask.style.left=x-(mask.offsetWidth/2)+"px";
        mask.style.top=y-(mask.offsetHeight/2)+"px";
        if(mask.offsetLeft<0){
            mask.style.left=0;
        }
        if(mask.offsetLeft>small.offsetWidth-mask.offsetWidth){
            mask.style.left=small.offsetWidth-mask.offsetWidth+"px";
        }
        if(mask.offsetTop<0){
            mask.style.top=0;
        }
        if(mask.offsetTop>small.offsetHeight-mask.offsetHeight){
            mask.style.top=small.offsetHeight-mask.offsetHeight+"px";
        }

        // 大图显示对应的位置
        //大图所移动的位置=mask的移动距离*大图的最大移动距离/mask的最大移动距离
        console.log(Big.offsetWidth);
        const bigx = mask.offsetLeft*(big.offsetWidth-Big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
        const bigy = mask.offsetTop*(big.offsetHeight-Big.offsetHeight)/(small.offsetHeight-mask.offsetHeight);
        big.style.left=-bigx+"px";
        big.style.top=-bigy+"px";
        

    })
})