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:
|
<<: Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)
>>: Detaillierte Erläuterung der Nginx Reverse Proxy WebSocket-Konfiguration
Artikel empfehlen
Detaillierte Erklärung der Überwachungseigenschaften von Vue
Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...
Eine kurze Diskussion über HTML-Titel, Absätze, Zeilenumbrüche, horizontale Linien und Sonderzeichen
Titel XML/HTML-CodeInhalt in die Zwischenablage k...
Zwei Möglichkeiten zum Erstellen von SSH-Server-Aliasen in Linux
Vorwort Wenn Sie häufig über SSH auf viele versch...
CSS füllt das übergeordnete Container-Div mit img-Bildern und passt sich der Containergröße an
Wenn auf einer Seite mehrere Bilder eingefügt wer...
Nativer JS-Musikplayer
In diesem Artikelbeispiel wird der spezifische JS...
So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)
Was ist ein Styleguide? Einfach ausgedrückt handel...
MySQL-Datenbank-Indexreihenfolge durch Sortierung – detaillierte Erklärung
Inhaltsverzeichnis Die Ursache des Vorfalls Sorti...
Detaillierte Erklärung der Anwendung von CSS Sprite
CSS Sprite, auch bekannt als CSS Sprite, ist eine...
So trennen Sie statischen und dynamischen Status durch die Kombination von Apache und Tomcat
Experimentelle Umgebung Apache und Tomcat sind be...
Detaillierte Erläuterung der praktischen Anwendung des HTML-Tabellenlayouts
Wann wird die Tabelle eingesetzt? Tabellen werden...
Zusammenfassung der relevanten Wissenspunkte zu Ajax in jQuery
Vorwort Studenten, die JavaScript lernen, wissen,...
CSS3-Übergang zum Erreichen des unterstrichenen Beispielcodes
In diesem Artikel wird der Beispielcode für den C...
Beschreibung der Ausführungsmechanismen von statischen Seiten und dynamischen Seiten
1. Eine statische Seite bedeutet, dass die Webseit...
MySql5.7.21 Installationspunkte Datensatznotizen
Die heruntergeladene Version ist die Zip-Dekompri...
React-Konfiguration px-Konvertierung rem-Methode
Installieren Sie zugehörige Abhängigkeiten npm ic...