JavaScript imitates Taobao magnifying glass effect

This article shares the specific code for JavaScript to achieve the Taobao magnifying glass effect for your reference. The specific content is as follows

HTML code

 <div class="thumbnail">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
        <div class="magnifier"></div>
    </div>
    <div class="original">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
    </div>
<script src="./index.js"></script>

CSS Code

*{
            margin: 0;
            padding: 0;
        }
        .thumbnail , .original{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: absolute;
        }
        .original{
            left: 450px;
            overflow: hidden;
            display: none;
        }
        .thumbnail>img{
            width: 400px;
        }
        .original>img{
            width: 800px;
            position: absolute;
        }
        .magnifier{
            cursor: move;
            width: 200px;
            height: 200px;
            background-color:rgba(206, 198, 198, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            
        }

js code

// thumbnail thumbnail // original original image // magnifier magnifier $(".thumbnail").mouseover(function(){
    $(".magnifier").show()
    $(".original").show()
})
$(".thumbnail").mousemove(function(ev){
    // console.log(ev)
    // Mouse xy coordinates relative to the page var mx = ev.pageX;
    var my =ev.pageY;
    
    var tx = mx - $(".thumbnail").offset().left
    var ty = my - $(".thumbnail").offset().top


    var l = tx -$(".magnifier").width()/2;
    var t = ty -$(".magnifier").height()/2;

    var maxX = $(".thumbnail").width() - $(".magnifier").width();
    var maxY = $(".thumbnail").height() - $(".magnifier").height()

    // Processing boundaries if( l >maxX){
        l = maxX
    }
    if( t >maxY){
        t = maxY
    }
    if(l <0){
        l =0
    }
    if(t<0){
        t=0
    }

    //Magnifying glass position $(".magnifier").css({
        left: l +"px",
        top : t + "px"
    })

    //Original image location$(".original >img").css({
        left:-l*2 +"px",
        top:-t*2 +"px"
    })
})
// Hide the magnifying glass when the mouse leaves the original image$(".thumbnail").mouseout(function(){
    $(".magnifier").hide();
    $(".original").hide();

})

Effect:

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:

Implementation process of the magnifying glass effect in the Javascript example project
JavaScript realizes magnifying glass special effects
JavaScript imitates Jingdong magnifying glass special effects
JavaScript object-oriented implementation of magnifying glass case
JavaScript imitates Jingdong magnifying glass effect
JavaScript to achieve magnifying glass effect
Ideas and codes for realizing magnifying glass effect in js
JavaScript implementation of magnifying glass details

<<: How to use CSS to achieve two columns fixed in the middle and adaptive

>>: Docker Machine in-depth explanation