Web-Frontend
js-Tutorial
Codebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen
Codebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen
Im vorherigen Artikel haben wir das Implementierungsbeispiel von Mausverfolgung in JavaScript ausführlich analysiert. Deshalb stellen wir Ihnen heute den Fall vor, in dem jQuery DIV implementiert, um der Mausbewegung zu folgen!
Der entscheidende Punkt besteht darin, herauszufinden, wie man die aktuelle Position und die Position der Maus, die aktuelle Position und die Position von p nach der Bewegung erhält:
Verwenden Sie jQuery, um zu erkennen, dass sich p mit der Bewegung von bewegt Maus, nicht die Position der Maus selbst! ! Aber die Bewegung von p relativ zur vorherigen Position
Der Code lautet wie folgt: (Achten Sie auf die Erklärung des grünen Teils)
Weitere Ressourcen für Spezialeffekte finden Sie hier zum PHP-Spezialeffekt-Download-Kanal :Mauseffekte
<!DOCTYPE html>
<html>
<head>
<meta charset="{utf-8}">
<title></title>
<script src="../jquery-3.2.0.js"></script>
<style>
.aa{
height: 100px;
width: 200px;
position: absolute;
background-color: green;
}
</style>
</head>
<body>
<p class="aa"></p>
</body>
</html>
<script>
$(".aa").mousedown(function(e){
//设置移动后的默认位置
var endx=0;
var endy=0;
//获取p的初始位置，要注意的是需要转整型，因为获取到值带px
var left= parseInt($(".aa").css("left"));
var top = parseInt($(".aa").css("top"));
//获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
var downx=e.pageX;
var downy=e.pageY; //pageY的y要大写，必须大写！！
// 鼠标按下时给p挂事件
$(".aa").bind("mousemove",function(es){
//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx= es.pageX-downx+left; //计算p的最终位置
var endy=es.pageY-downy+top;
//带上单位
$(".aa").css("left",endx+"px").css("top",endy+"px")
});
})
$(".aa").mouseup(function(){
//鼠标弹起时给p取消事件
$(".aa").unbind("mousemove")
})
</script>unterscheiden sich vom folgenden Code: (Der endgültige Effekt besteht darin, dass sich p mit der Mausposition bewegt. Wenn Sie Wenn Sie den spezifischen Effekt sehen möchten, können Sie ihn einfügen, kopieren und vergleichen, um zu sehen, wo der Unterschied liegt.
<script>
$(".aa").mousedown(function(e){
$(document).bind("mousemove",function(e){
$(".aa").css("left",e.pageX).css("top",e.pageY)
});
})
$(".aa").mouseup(function(){
$(document).unbind("mousemove")
})
</script>Zusammenfassung:
In diesem Artikel wird Beispielcode verwendet, um den Fall vorzustellen, in dem jQuery DIV implementiert, um der Mausbewegung zu folgen. Ich glaube, meine Freunde, ich habe bereits ein gewisses Verständnis dafür und hoffe, dass es für Ihre Arbeit hilfreich sein wird~
Verwandte Empfehlungen:
Ein einfacher Mausfolge-Eingabeaufforderungseffekt basierend auf JQuery
Das obige ist der detaillierte Inhalt vonCodebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1209
24
Wie deaktiviere ich die Vorschau der Taskleisten-Miniaturansichten in Win11? Deaktivieren Sie die Anzeige der Miniaturansichten der Taskleistensymbole durch Bewegen der Maus
Feb 29, 2024 pm 03:20 PM
In diesem Artikel erfahren Sie, wie Sie die Miniaturbildfunktion deaktivieren, die angezeigt wird, wenn die Maus das Taskleistensymbol im Win11-System bewegt. Diese Funktion ist standardmäßig aktiviert und zeigt eine Miniaturansicht des aktuellen Fensters der Anwendung an, wenn der Benutzer den Mauszeiger über ein Anwendungssymbol in der Taskleiste bewegt. Einige Benutzer empfinden diese Funktion jedoch möglicherweise als weniger nützlich oder störend für ihr Erlebnis und möchten sie deaktivieren. Miniaturansichten in der Taskleiste können Spaß machen, aber auch ablenken oder stören. Wenn man bedenkt, wie oft Sie mit der Maus über diesen Bereich fahren, haben Sie möglicherweise ein paar Mal versehentlich wichtige Fenster geschlossen. Ein weiterer Nachteil besteht darin, dass es mehr Systemressourcen verbraucht. Wenn Sie also nach einer Möglichkeit suchen, ressourceneffizienter zu arbeiten, zeigen wir Ihnen, wie Sie es deaktivieren können. Aber
HP bringt die Softmaus Professor 1 mit drei Modi auf den Markt: 4000 DPI, Blue Shadow RAW3220, Erstpreis 99 Yuan
Apr 01, 2024 am 09:11 AM
Laut Nachrichten dieser Website vom 31. März hat HP kürzlich auf JD.com eine Professor1-Bluetooth-Maus mit drei Modi auf den Markt gebracht, die in den Farben Schwarz und Weiß in Milchtee erhältlich ist. Der Anfangspreis beträgt 99 Yuan und eine Anzahlung von 10 Yuan ist erforderlich . Berichten zufolge wiegt diese Maus 106 Gramm, hat ein ergonomisches Design, misst 127,02 x 79,59 x 51,15 mm, verfügt über sieben optionale 4000-DPI-Stufen, ist mit einem Blue Shadow RAW3220-Sensor ausgestattet und verwendet angeblich einen 650-mAh-Akku kann mit einer einzigen Ladung 2 Monate lang verwendet werden. Die dieser Site beigefügten Mausparameterinformationen lauten wie folgt:
Razer |. Die kabellose Pokémon Gengar-Maus und das Mauspad sind jetzt zum Setpreis von 1.549 Yuan erhältlich
Jul 19, 2024 am 04:17 AM
Laut Nachrichten dieser Website vom 12. Juli kündigte Razer heute die Einführung der kabellosen Maus und des Mauspads Razer|Pokémon Gengar an. Die Einzelproduktpreise betragen 1.299 Yuan bzw. 299 Yuan, und der Paketpreis inklusive der beiden Produkte beträgt 1.549 Yuan. Dies ist nicht das erste Mal, dass Razer Peripherieprodukte mit Gengar-Co-Branding auf den Markt bringt. Im Jahr 2023 brachte Razer die Gaming-Maus Yamata Orochi V2 im Gengar-Stil auf den Markt. Die beiden dieses Mal eingeführten neuen Produkte verwenden alle einen dunkelvioletten Hintergrund, der dem Erscheinungsbild der Ghost-, Ghost- und Gengar-Familien ähnelt. Sie sind mit den Umrissen dieser drei Pokémon und Pokébällen bedruckt, mit dem Charakter Gengar in der Mitte großes, farbenfrohes Bild eines klassischen Pokémon vom Typ Geist. Auf dieser Website wurde festgestellt, dass die drahtlose Maus Razer|Pokémon Gengar auf der zuvor veröffentlichten Viper V3 Professional Edition basiert. Sein Gesamtgewicht beträgt 55 g und es ist mit Razers FOC der zweiten Generation ausgestattet
Die Produkte der VGN-Co-Branding-Tastatur- und Mausserie „Elden's Circle' sind jetzt in den Regalen: Lani / Faded One benutzerdefiniertes Thema, ab 99 Yuan
Aug 12, 2024 pm 10:45 PM
Laut Nachrichten dieser Website vom 12. August hat VGN am 6. August die gemeinsame Tastatur- und Mausserie „Elden Ring“ auf den Markt gebracht, die Tastaturen, Mäuse und Mauspads umfasst, die im individuellen Design von Lani/Faded One gestaltet sind Es wurde auf JD.com zum Preis von 99 Yuan veröffentlicht. Die dieser Website beigefügten Informationen zu neuen Co-Branding-Produkten lauten wie folgt: VGN丨Elden Law Ring S99PRO-Tastatur Diese Tastatur verwendet ein Gehäuse aus reiner Aluminiumlegierung, ergänzt durch eine fünfschichtige Schalldämpferstruktur, verwendet eine GASKET-Blattfederstruktur und verfügt über eine einzelne -Tasten-Schlitzplatine und Tastenkappen aus PBT-Material in Originalhöhe, personalisierte Rückwandplatine aus Aluminiumlegierung; unterstützt Drei-Modus-Verbindung und SMARTSPEEDX-Technologie mit geringer Latenz, verbunden mit VHUB, kann es ab 549 Yuan mehrere Geräte auf einmal verwalten; VGN丨Elden French Ring F1PROMAX kabellose Maus die Maus
In welchem Ordner befindet sich der Razer-Maustreiber?
Mar 02, 2024 pm 01:28 PM
Viele Benutzer wissen nicht, wo die von ihren Razer-Treibern installierten Dateien gespeichert sind. Diese Treiberdateien werden normalerweise auf der Systemfestplatte installiert, bei der es sich um das Laufwerk C des Computers handelt. Der genaue Speicherort befindet sich im RAZE-Ordner unter „Programme“. In welchem Ordner befindet sich der Razer-Maustreiber? A: Im RAZE-Ordner unter „Programme“ auf dem Systemlaufwerk C. Im Allgemeinen wird der Treiber auf dem Laufwerk C installiert. Suchen Sie ihn einfach anhand des Speicherorts. Einführung in die Installationsmethode für Razer-Maustreiber 1. Doppelklicken Sie nach dem Herunterladen der Datei von der offiziellen Website, um die heruntergeladene EXE-Datei auszuführen. 2. Warten Sie, bis die Software geladen ist. 3. Hier können Sie auswählen, welchen Treiber Sie installieren möchten. 4. Klicken Sie nach der Auswahl unten rechts auf „Installieren“.
6000 mAh Silizium-Minusbatterie! Xiaomi 15Pro-Upgrade erneut durchgesickert
Jul 24, 2024 pm 12:45 PM
Laut Nachrichten vom 23. Juli verbreitete der Blogger Digital Chat Station die Nachricht, dass die Akkukapazität des Xiaomi 15 Pro auf 6000 mAh erhöht wurde und das kabelgebundene Blitzladen mit 90 W unterstützt. Dies wird das Pro-Modell mit dem größten Akku in der digitalen Serie von Xiaomi sein. Digital Chat Station enthüllte zuvor, dass der Akku des Xiaomi 15Pro eine extrem hohe Energiedichte aufweist und der Siliziumgehalt viel höher ist als bei Konkurrenzprodukten. Nachdem im Jahr 2023 siliziumbasierte Batterien in großem Maßstab getestet werden, wurden Siliziumanodenbatterien der zweiten Generation als zukünftige Entwicklungsrichtung der Branche identifiziert. Dieses Jahr wird der Höhepunkt des direkten Wettbewerbs einläuten. 1. Die theoretische Grammkapazität von Silizium kann 4200 mAh/g erreichen, was mehr als dem Zehnfachen der Grammkapazität von Graphit entspricht (die theoretische Grammkapazität von Graphit beträgt 372 mAh/g). Für die negative Elektrode beträgt die Kapazität, wenn die Lithiumioneneinfügungsmenge das Maximum erreicht, die theoretische Grammkapazität, was bedeutet, dass sie bei gleichem Gewicht erfolgt
Colorful bringt die kabellose Gaming-Maus M900 Pro auf den Markt: ergonomische Form für die rechte Hand, 8K-Nano-Empfänger, ab 199 Yuan
Mar 23, 2024 pm 05:16 PM
Laut Nachrichten dieser Website brachte Delux am 22. März die kabellose Gaming-Maus M900Pro mit ergonomischer Rechtshänderform auf den Markt. Der erste Vorverkaufspreis beginnt bei 199 Yuan. Das farbenfrohe M900Pro ist ergonomisch für Rechtshänder konzipiert und für Benutzer mit mittelgroßen bis großen Händen konzipiert. Es wiegt 63 g und ist mit einer matten UV-Beschichtung versehen. Die Maus verwendet den PAW3395-Sensor, der ursprüngliche Nano-Empfänger unterstützt eine drahtlose Rücklaufrate von 8000 Hz, ist mit der Huannuo Blue Shell Pink Dot-Mikrobewegung ausgestattet und wird standardmäßig mit einer RGB-Ladestation und Anti-Rutsch-Aufklebern geliefert. Darüber hinaus unterstützt die Maus auch Funktionen wie LOD-Anpassung, vollständige Tastenanpassung, benutzerdefinierte Welligkeitskontrolle und Geradenkorrektur. Sie ist mit PTFE-Fußpolstern, einer 1,6 m langen Fallschirmschnur und einem integrierten Aufbewahrungsfach für den Empfänger ausgestattet. Diese Seite fasst die spezifischen Parameter dieser Maus wie folgt zusammen: Farbe: Schwarz, Weiß, Rot
Der neue König der heimischen FPS! „Operation Delta' Battlefield übertrifft Erwartungen
Mar 07, 2024 am 09:37 AM
„Operation Delta“ wird heute (7. März) einen groß angelegten PC-Test mit dem Namen „Codename: ZERO“ starten. Letztes Wochenende veranstaltete dieses Spiel in Shanghai eine Offline-Flashmob-Erlebnisveranstaltung, und 17173 hatte auch das Glück, zur Teilnahme eingeladen zu werden. Dieser Test liegt etwas mehr als vier Monate seit dem letzten Test zurück, was uns neugierig macht, welche neuen Highlights und Überraschungen wird „Operation Delta“ in so kurzer Zeit mit sich bringen? Vor mehr als vier Monaten habe ich „Operation Delta“ in einer Offline-Verkostung und der ersten Beta-Version erlebt. Damals öffnete das Spiel nur den „Dangerous Action“-Modus. Allerdings war die Operation Delta für ihre Zeit bereits beeindruckend. Im Kontext der großen Hersteller, die in den Markt für mobile Spiele strömen, ist ein solcher FPS mit internationalen Standards vergleichbar
