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
HTML erlaubt teilweise erzwungene Bildlaufleisten, um den Gesamtstil und das Layout nicht zu zerstören.
Poste zuerst das Effektbild: Damit der Gesamtstil ...
Zeichnen Sie ein iPhone basierend auf CSS3
Ergebnis:Implementierungscode html <div Klasse...
Tutorial zu HTML-Tabellen-Tags (11): Horizontales Ausrichtungsattribut ALIGN
In horizontaler Richtung können Sie die Ausrichtu...
Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren
Inhaltsverzeichnis 1. Aktuelle Situation 2. Commu...
Detaillierte Erläuterung zum Erstellen einer Ansicht (CREATE VIEW) und zu Nutzungsbeschränkungen in MySQL
In diesem Artikel werden die Erstellung von MySQL...
Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning
Hintergrund: Position: Sticky wird auch Sticky-Po...
Detaillierte Erklärung, ob die MySQL-Datenbank Fremdschlüsseleinschränkungen verwenden soll
1. Einleitung Das Thema, ob Fremdschlüsseleinschr...
IE6/7 wird ein Chaos: Problem mit der Höhe leerer Textknoten
Vorwort: Verwenden Sie die Debugleiste, um den Dok...
So verwenden Sie Docker zum Bereitstellen von Front-End-Anwendungen
Docker erfreut sich immer größerer Beliebtheit. E...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu 18.04 MySQL 8.0
In diesem Artikel wird die Installations- und Kon...
Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind
In den letzten Projekten werden viele Formulare e...
Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten
Vorwort: Die verteilte Master-Slave-Architektur v...
Optimierungsanalyse der Limit-Abfrage in MySQL-Optimierungstechniken
Vorwort Im realen Geschäftsleben ist Paging eine ...
Tabelle Tag (Tabelle) Im Detail
<br />Tabelle ist ein Tag, das schon seit la...
JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern
In diesem Artikel wird der spezifische Code zur I...