JavaScript to achieve product magnifying glass effect

This article shares the specific code of JavaScript to implement a product magnifying glass for your reference. The specific content is as follows

HTML+CSS part:

<style>
        .small{
            position: relative;
            width: 400px;
            height: 450px;
            border: 1px solid #ccc;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            background-color: rgba(0, 255, 0, .2);
        }
        .big{
            position: absolute;
            left: 450px;
            top: 8px;
            width: 550px;
            height: 550px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .bigimg{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
 
<body>
    <div class="small">
        <img src="./img/small.jpg">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./img/big.jpg">
    </div>
</body>

JS part:

<script>
        var small = document.querySelector('.small');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg=document.querySelector('.big>img');
        // Get the width and height of the big image var bigWidth=bigImg.offsetWidth;
        var bigHeight=bigImg.offsetHeight;
 
        // 
        function move(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            console.log(x,y);
            // Move the mask position var maskHeight = mask.offsetHeight/2;
            var maskWidth = mask.offsetWidth/2;
            mask.style.left = x - maskWidth+'px';
            mask.style.top = y - maskHeight + 'px';
 
        // Limit the movement range of the mask // console.log('mask.offsetTop',mask.offsetTop);
            // console.log('mask.offsetLeft',mask.offsetLeft);
            var maxLeft=small.offsetWidth - mask.offsetWidth;
            if(mask.offsetTop<0){
                mask.style.top=0;
            }
            if(mask.offsetLeft > small.offsetWidth - mask.offsetWidth){
                mask.style.left =maxLeft+'px';
            }
            if(mask.offsetLeft<0){
                mask.style.left = 0;
            }
            if(mask.offsetTop > small.offsetHeight - mask.offsetHeight){
                mask.style.top = small.offsetHeight - mask.offsetHeight + 'px';
            }
 
        // bigImg big image big box big image movement // (bigImg.offsetWidth - big.offsetWidth) / (samll.offsetWidtth - mask.offsetWidth)
        // Maximum moving distance of large image = - moving distance of mask * maximum distance of large image / maximum moving distance of mask bigImg.style.left = -mask.offsetLeft*(bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)+"px";
            bigImg.style.top = -mask.offsetTop*(bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight)+"px";
        }
       
        // Move the mask on the small imagesmall.addEventListener('mousemove',move);
        small.addEventListener('mouseover',function(){
            big.style.display='block';
            mask.style.display='block';
        })
        small.addEventListener('mouseout',function(){
            big.style.display='none';
            mask.style.display='none';
        })
</script>

Effect demonstration:

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:

js magnifying glass magnifying picture effect
A simple example of using js to achieve the effect of a magnifying glass
JavaScript image magnifying glass effect code [the code is relatively simple]
A magical Javascript image magnifier
JavaScript image magnifier (drag and drop, zoom effect)
Magnifying glass effect written in native js
Commonly used js magnifying glass effects on e-commerce websites
JavaScript image cutting effect (magnifying glass)
Image magnifier jquery.jqzoom.js usage example with magnifying glass icon
Detailed explanation of the implementation method of js image magnifying glass effect

<<: Deleting two images with the same id in docker

>>: XHTML tags that are easily confused by the location of the use