js, um einen einfachen Bild-Drag-Effekt zu erzielen

In diesem Artikel wird der spezifische Code von js zur Erzielung eines einfachen Bild-Drag-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

//Bilder müssen selbst importiert werden<!doctype html>
<html>
 <Kopf>
 <meta charset="UTF-8">
 <title>Erkennen Sie das kleine Quadrat, das im aktuellen Anzeigebereich nicht angeklickt werden kann</title>
 <Stil>
 div{Position:fest;Breite:100px;Höhe:100px;
  Hintergrundbild:URL(Bilder/xiaoxin.gif);
   Hintergrundgröße: 100 %;
 }
 </Stil>
 
 </Kopf>
 <Text>
 <div id="pop"></div>
 <Skript>
 let pop = document.getElementById("pop")
 //Definieren Sie eine Switch-Variable, um zu steuern, ob das Bild der Mausbewegung folgt. let canMove = false;
 //Wenn Sie mit dem Ziehen beginnen, speichern Sie die relative Position der Maus von der oberen linken Ecke des Div let offsetX,offsetY;
 //Wenn die Maus auf Pop gedrückt wird, pop.onmousedown=function(e){
  //Sie können mit dem Ziehen beginnen canMove=true;
  offsetX=e.offsetX;
  offsetY=e.offsetY;
 }
 //Wenn sich die Maus im Fenster bewegt window.onmousemove=function(e){
  //Nur wenn Pop sich bewegen kann if(canMove==true){
  //Pop der Mausbewegung folgen lassen //Wenn Sie mit dem Ziehen beginnen, erhalten Sie sofort die relative Position der Maus zur oberen linken Ecke des Bildes //Finden Sie die Ober- und die linke Seite des Pops
  lass links=e.clientX-offsetX;
  let top=e.clientY-offsetY;
  //Setzen Sie die oberen und linken Attribute von Pop pop.style.left=left+"px";
   pop.style.top=oben+"px";
  }
 }
 //Wenn die Maustaste beim Popup losgelassen wird, pop.onmouseup=function(){
  //Ziehen beenden canMove=false
 } 
 </Skript>
 </body>
</html>

Effektbild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Natives JS zum Erzielen eines Drag-and-Drop-Bildeffekts
js implementiert die Methode zum Wechseln von Bildern durch Ziehen der Maus
JS-Methode zum Vergrößern, Verkleinern und Ziehen von Bildern [kompatibel mit IE und Firefox]
JS HTML5 Drag & Drop-Upload Bildvorschau
Beispiel für die Verwendung von JavaScript zum Vergrößern und Verkleinern sowie zum Ziehen und Ablegen von Bildern
js, um die Drag & Drop-Funktion zum Hochladen von Bildern zu erreichen
js, um Bildvergrößerung und Drag-Special-Effects-Code-Sharing zu erreichen
JS implementiert einfachen Beispielcode zum Sortieren per Drag & Drop von Bildern
js css3 realisiert den Bild-Drag-Effekt
Probleme mit dem Javascript-Bearbeitungsfeld für Webseiten und dem Ziehen von Bildern

<<: Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

>>: Detaillierte Erläuterung der Nginx Reverse Proxy WebSocket-Konfiguration