JavaScript が Taobao の虫眼鏡効果を模倣

 <div class="サムネイル">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
        <div class="拡大鏡"></div>
    </div>
    <div class="オリジナル">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
    </div>
<script src="./index.js"></script>

*{
            マージン: 0;
            パディング: 0;
        }
        .サムネイル、.オリジナル{
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 1px 実線の赤;
            位置: 絶対;
        }
        。オリジナル{
            左: 450ピクセル;
            オーバーフロー: 非表示;
            表示: なし;
        }
        .サムネイル>画像{
            幅: 400ピクセル;
        }
        .オリジナル>画像{
            幅: 800ピクセル;
            位置: 絶対;
        }
        .拡大鏡{
            カーソル: 移動;
            幅: 200ピクセル;
            高さ: 200px;
            背景色:rgba(206, 198, 198, 0.5);
            位置: 絶対;
            上: 0;
            左: 0;
            表示: なし;
            
        }

// サムネイル サムネイル // オリジナル オリジナル画像 // 拡大鏡 拡大鏡 $(".thumbnail").mouseover(function(){
    $(".拡大鏡").表示()
    $(".オリジナル").表示()
})
$(".thumbnail").mousemove(function(ev){
    // コンソール.log(ev)
    // ページに対するマウスの xy 座標 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 = 最大X
    }
    if(t >maxY){
        t = 最大Y
    }
    もし(l <0){
        0 = 0 です
    }
    t<0の場合{
        t=0
    }

    //虫眼鏡の位置 $(".magnifier").css({
        左: l +"px",
        上: t + "px"
    })

    //元の画像の場所$(".original >img").css({
        左:-l*2 +"px",
        上:-t*2 +"px"
    })
})
// マウスが元の画像から離れると虫眼鏡を非表示にします$(".thumbnail").mouseout(function(){
    $(".拡大鏡").非表示();
    $(".オリジナル").hide();

})