JavaScript imitiert den Taobao-Lupeneffekt

 <div Klasse="Vorschaubild">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
        <div Klasse = "Magnifier"></div>
    </div>
    <div Klasse="Original">
        <img src="./img/12-1Z930152149 (2).jpg" alt="">
    </div>
<script src="./index.js"></script>

*{
            Rand: 0;
            Polsterung: 0;
        }
        .thumbnail , .original{
            Breite: 400px;
            Höhe: 400px;
            Rand: 1px durchgehend rot;
            Position: absolut;
        }
        .Original{
            links: 450px;
            Überlauf: versteckt;
            Anzeige: keine;
        }
        .thumbnail>img{
            Breite: 400px;
        }
        .original>img{
            Breite: 800px;
            Position: absolut;
        }
        .Magnifier{
            Cursor: bewegen;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: rgba (206, 198, 198, 0,5);
            Position: absolut;
            oben: 0;
            links: 0;
            Anzeige: keine;
            
        }

// Miniaturansicht Miniaturansicht // Original Originalbild // Lupe Lupe $(".thumbnail").mouseover(function(){
    $(".magnifier").anzeigen()
    $(".original").anzeigen()
})
$(".thumbnail").mousemove(Funktion(ev){
    // konsole.log(ev)
    // xy-Koordinaten der Maus relativ zur Seite 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()

    // Verarbeitungsgrenzen if( l >maxX){
        l = maxX
    }
    wenn( t >maxY){
        t = maxY
    }
    wenn(l <0){
        l =0
    }
    wenn(t<0){
        t=0
    }

    //Lupenposition $(".magnifier").css({
        links: l +"px",
        oben: t + "px"
    })

    //Ursprünglicher Bildspeicherort$(".original >img").css({
        links: -l*2 +"px",
        oben: -t*2 +"px"
    })
})
// Lupe ausblenden, wenn die Maus das Originalbild verlässt$(".thumbnail").mouseout(function(){
    $(".magnifier").hide();
    $(".original").ausblenden();

})