Ideen und Codes zur Realisierung des Lupeneffekts in js

<div id="box">
        <!-- toBig ist ein Lupenelement -->
     <div id="zuGroß"></div>
        <!-- Kleines Bild -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- Großes Bild, Verhältnis 1,5 -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

 *{
          Rand: 0px;
          Polsterung: 0px;
            }    
            #Kasten{
             Position: relativ;
             schweben: links;
            }
   #zuGroß{
    Breite: 80px;
    Höhe: 80px;
    Rand: 1px durchgehend grau;
    Hintergrundfarbe: transparent;
    Position: absolut;
   }
   #seiGroß{
    schweben: links;
    Überlauf: versteckt;
    Rand: 1px durchgehend grau;
    Position: relativ;
    links: 40px;
    oben: 325px;
   }
   #großesBild{
    Position: absolut;
   }

<Skripttyp="text/javascript">
            //Holen Sie sich das kleine Bild, das große Bild, das Lupenelement und das übergeordnete Element des großen Bildes var smallImg = document.querySelector ("#smallImg");
   var bigImg = document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*Berechnen Sie das Verhältnis von kleinen Bildern zu großen Bildern beim Laden der Seite*/
            var q=0;
   fenster.onload = funktion(){
    q=großesBild.Offsetbreite/kleinesBild.Offsetbreite;
                //Berechnen Sie die Größe des anzuzeigenden vergrößerten Inhalts basierend auf der Breite, Höhe und dem Verhältnis der Lupe beBig.style.width = toBig.clientWidth * q + "px";
    beBig.style.height = toBig.clientHeight * q + "px";
   }
            //Holen Sie sich die Mitte des Lupenelements und stellen Sie sicher, dass sich die Maus in der Mitte der Lupe befindet. var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            //Flag ist ein Zeichen. Wenn die Maus gedrückt wird, ist es wahr, Sie können sich bewegen. Flag=false;
   toBig.onmousedown = Funktion(){
    Flagge=wahr;
   }
   toBig.onmouseup = Funktion(){
    Flagge=falsch;
   }
   
   Fenster.onmousemove=Funktion(ev){
    var ev = ev || Fenster.Ereignis;
                //Wenn Flag wahr ist, wird das Lupenelement gedrückt und kann gezogen werden, wenn (Flag) {
                    // Aktuelle Position der Maus abrufen und zusätzlich zum Element selbst die zu verschiebende Position berechnen var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX=mouseX-xCenter;
 
                    //Beurteilen, ob das Lupenelement den kleinen Bildbereich überschreitet, if (trueX < smallImg.offsetLeft) {
      trueX = kleinesBild.offsetLeft;
     }
     wenn(trueX > smallImg.clientWidth - toBig.offsetWidth){
      trueX = smallImg.ClientWidth - toBig.OffsetWidth;
     }
     var trueY=mouseY - yCenter;
     wenn(trueY <= smallImg.offsetTop){
      trueY = kleinesBild.offsetTop;
     }
     if (trueY > smallImg.clientHeight - toBig.offsetHeight) {
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    //Kleines Bild wird nachBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     Konsole.log(trueX,trueY);
     
     // Die Position, wohin das große Bild verschoben werden soll bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top = -(trueY * q) + "px";
    }
   }
   
</Skript>