JavaScript 练手小技巧：图片放大镜效果

先看效果图：（为了减少体积，压缩了画面质量，也可以参考淘宝，天猫之类的产品详情展示页的放大镜效果）

整体思路

1、整个结构分为 小图（左边），大图（右边）两部分。为了方便计算，大图的宽高是小图的 2 倍。

2、小图有个遮罩 mask 部分，大图的区域是这个 mask 宽高的 2 倍。

整个效果就是：mask 在哪里，大图就展示哪里。

3、mask 和大图的图片，都要能任意移动，所以它们都是绝对定位的。

4、mask 要跟随鼠标，因此要获取鼠标在小图中的坐标。坐标的获取，可以参考我这篇文章 100%经典文章：JS如何获取鼠标在一个标签中的坐标

mask 要跟随鼠标，但是不能超出 小图的范围。所以，要判断 mask 的坐标范围 x，y 的值。

5、大图的位置移动，是mask移动左边的反向*2 。

HTML和CSS

<div class="box" id="box">
    <div class="small" id="small">
        <img src="../images/fdj-s.jpg" alt="">
        <!-- mask -->
        <div class="fdj_mask" id="mask"></div>
        <!-- mask end -->
    </div>
    <div class="big" id="big">
        <img src="../images/fdj.jpg" alt="">
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}

.box{
    width: 500px;
    height: 500px;
    margin-left: 50px;
    margin-top: 50px;
    position: relative;
}

/*------ 小图的样式----- */
.small,
.small img{
    width: 500px;
    height: 500px;
}

/* 小图框架相对定位 */
.small{
    position: relative;
}
/* 小图遮罩区绝对定位，方便随时移动位置
    默认透明度为 0
*/
.fdj_mask{
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* 当鼠标在小图上的时候，
    遮罩区透明度为 1  */
.small:hover .fdj_mask{
    opacity: 1;
}

/*------ 大图的样式----- */
/* 大图绝对定位，默认隐藏
    宽高为小图遮罩区的 2 倍。
    默认隐藏
*/
.big{
    position: absolute;
    left: 510px;
    top: 0;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border:1px #000 solid;
    display: none;
}
/* 大图的图片，宽高为小图的 2 倍
    绝对定位，方便更改位置
*/
.big img{
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 0;
    left: 0;
}

JavaScript代码

{
    let small = document.querySelector("#small");
    let mask = document.querySelector("#mask");
    let big = document.querySelector("#big");
    let  bigImg= document.querySelector("#big>img");


    small.addEventListener("mouseenter",function(){
        big.style.display = "block" ;
    });
    small.addEventListener("mouseleave",function(){
        big.style.display = "none" ;
    });

    small.addEventListener("mousemove",function(event){
        let pos = small.getBoundingClientRect();
        let x = event.clientX -pos.x ;
        let y = event.clientY - pos.y ;
        console.info(x,y);
        /* mask 跟着鼠标走 */
        /* 判断坐标 , 不能让 mask 超出 small 的范围 */
        if( x< 100 ){ x = 100 ; }
        if( x > 400 ){  x = 400 ;  }

        ( y < 100 )&&( y = 100 );
        ( y > 400 )&&( y = 400 );
        /* 设定 mask 的位置 */
        mask.style.left = (x-100) + "px";
        mask.style.top = (y-100) + "px";

        /* 控制大图的移动
           大图位置是 mask 位置的反向*2
        * */
        bigImg.style.left = -(x-100)*2+"px";
        bigImg.style.top = -(y-100)*2+"px";
    }); 
 
}

完工。

也可以拓展成下面几个缩略图，点击换图的效果。只要更换掉小图和大图的 src 路径即可。这里就不拓展了。

觉得好的，点个赞呗~ 哈~