JavaScript如何實現仿淘寶放大鏡效果

這篇文章主要為大家展示了“JavaScript如何實現仿淘寶放大鏡效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript如何實現仿淘寶放大鏡效果”這篇文章吧。

html代碼

 <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代碼 

*{
            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代碼

// thumbnail   縮略圖
// original    原圖
// magnifier   放大鏡

$(".thumbnail").mouseover(function(){
    $(".magnifier").show()
    $(".original").show()
})
$(".thumbnail").mousemove(function(ev){
    // console.log(ev)
    // 鼠標相對頁面 x y 坐標
    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()

    // 處理邊界
    if( l >maxX){
        l = maxX
    }
    if( t >maxY){
        t = maxY
    }
    if(l <0){
        l =0
    }
    if(t<0){
        t=0
    }

    //放大鏡位置
    $(".magnifier").css({
        left: l +"px",
        top : t + "px"
    })

    //原圖位置
    $(".original >img").css({
        left:-l*2 +"px",
        top:-t*2 +"px"
    })
})
// 鼠標離開 隱藏 放大鏡 ，原圖
$(".thumbnail").mouseout(function(){
    $(".magnifier").hide();
    $(".original").hide();

})

效果：

以上是“JavaScript如何實現仿淘寶放大鏡效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！