JavaScript hands-on skills: picture magnifying glass effect

First look at the renderings: (In order to reduce the size and compress the picture quality, you can also refer to the magnifying glass effect on the product detail page of Taobao, Tmall, etc.)

the whole idea

1. The whole structure is divided into two parts: small picture (left) and large picture (right). For the convenience of calculation, the width and height of the large image is twice that of the small image .

2. The small image has a mask part, and the area of ​​the large image is twice the width and height of the mask .

The whole effect is: where the mask is, the big picture will show it.

3. The mask and the big picture must be able to move arbitrarily, so they are absolutely positioned.

4. The mask must follow the mouse, so the coordinates of the mouse in the small picture must be obtained. To obtain the coordinates, please refer to my  100% classic article: How JS obtains the coordinates of the mouse in a label

The mask must follow the mouse, but cannot exceed the scope of the thumbnail. Therefore, it is necessary to determine the value of the coordinate range x and y of the mask.

5. The position movement of the big picture is the reverse of the left side of the mask movement*2.

HTML sum 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 code

{
    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";
    }); 
 
}

Finished.

It can also be expanded into the following thumbnails, and click to change the effect. Just replace the src path of the small picture and the big picture. It will not be expanded here.

I think it’s good, just like it~ ha~