js realizes the magnifying glass function of shopping website

This article shares the specific code of js to realize the magnifying glass function of shopping website for your reference. The specific content is as follows

First look at the effect diagram:

First is the layout, a small frame on the left, including a mouse movement frame, and a magnification frame on the right.

<div class="box">
        <div class="small">
            <img src="small3.jpg" alt="">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="big3.jpg" alt="">
        </div>
</div>

Write some CSS

.small{
    position: relative;
    float: left;
    width: 450px;
    height: 450px;
    border:1px solid #000;
}
.small .move{
    position: absolute;
    top:0;
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,0.4);
    cursor:move;
    display: none;
}
.big{
    position: relative;
    float: left;
    width: 540px;
    height: 540px;
    margin-left: 20px;
    overflow: hidden;
    border:1px solid #000;
    display: none;
}
.bigimg{
    position: absolute;
    top:0;
    left: 0;
}

js part:

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //First, get all the required elements small.onmouseover=function(){
        move.style.display='block';
        big.style.display="block";
    };
    small.onmouseout=function(){
        move.style.display='none';
        big.style.display="none";
    };
    small.onmousemove=function(e){
        e=e||window.event; //Compatibility considerations var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>smallImg.offsetWidth-move.offsetWidth){
            x=smallImg.offsetWidth-move.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>smallImg.offsetHeight-move.offsetHeight){
            y=smallImg.offsetHeight-move.offsetHeight;
        }
        move.style.left=x+"px";
        move.style.top=y+"px";
        //Code to implement the left move block following the mouse movement var scale = bigImg.offsetWidth/smallImg.offsetWidth;
        //Enlarge according to the proportion bigImg.style.left='-'+x*scale+'px';
        //Because the image needs to be moved left and up, a negative sign must be added bigImg.style.top='-'+y*scale+'px';
    }

The magnifying glass effect is achieved!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: