Heim Web-Frontend js-Tutorial So implementieren Sie den jQuery-Ebeneneffekt nach der Mausbewegung_jquery

So implementieren Sie den jQuery-Ebeneneffekt nach der Mausbewegung_jquery

May 16, 2016 pm 04:16 PM
jquery Schichten 效果 方法 folgen 运动 鼠标

Das Beispiel in diesem Artikel beschreibt, wie jQuery Ebeneneffekte implementiert, die der Mausbewegung folgen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Grundlegende Ziele

Schreiben Sie eine Ebene, die der Mausbewegung folgt,

Die aktuelle Mausposition wird in der Ebene angezeigt,

Wie unten gezeigt:

Der Grund, warum diese Ebene jQuery anstelle von Javascript verwendet, liegt darin, dass der jQuery-Code problemlos mit allen aktuellen Mainstream-Browsern kompatibel ist. Zumindest IE8 erfordert keine großen Codeabschnitte wie Javascript.

2. Produktionsprozess

Der Kern dieses Experiments ist das Mousemove-Ereignis in JQuery,

Wird ausgelöst, wenn sich die Maus bewegt.

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

mouse
<script> /*Ein Paar aus e.pageX und e.pageY kann die aktuellen Koordinaten der Maus erhalten. Beachten Sie, dass der formale Parameter e in der anfänglichen Funktionsdeklaration verwendet wird*/ <br> $(document).mousemove(function (e) { <br> var x; <br> var y; <br> var xy="<br>x-Koordinate: " e.pageX ", y-Koordinate: " e.pageY; x=e.pageX; <br> y=e.pageY; <br> Dokument .getElementById("mousePosition").style.left = x "px"; Dokument .getElementById("mousePosition").style.top = y "px"; $("#mousePosition").html(xy); }) <br> <br> </script>


Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

Möglicherweise sind Sie schon einmal auf das Problem gestoßen, dass auf dem Bildschirm Ihres Smartphones grüne Linien erscheinen. Auch wenn Sie es noch nie gesehen haben, müssen Sie entsprechende Bilder im Internet gesehen haben. Haben Sie schon einmal erlebt, dass der Bildschirm einer Smartwatch weiß wird? Am 2. April erfuhr CNMO aus ausländischen Medien, dass ein Reddit-Benutzer ein Bild auf der sozialen Plattform geteilt hatte, auf dem zu sehen war, wie der Bildschirm der Smartwatches der Samsung Watch-Serie weiß wurde. Der Benutzer schrieb: „Ich war gerade dabei, aufzuladen, und als ich zurückkam, war es so. Ich habe versucht, neu zu starten, aber der Bildschirm der Samsung Watch wurde beim Neustart immer noch weiß.“ Der Reddit-Benutzer hat das Smartwatch-spezifische Modell nicht angegeben. Dem Bild nach zu urteilen dürfte es sich jedoch um eine Samsung Watch5 handeln. Zuvor hatte sich auch ein anderer Reddit-Benutzer gemeldet

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) May 01, 2024 pm 12:01 PM

Leider löschen Menschen aus bestimmten Gründen oft versehentlich bestimmte Kontakte. WeChat ist eine weit verbreitete soziale Software. Um Benutzern bei der Lösung dieses Problems zu helfen, wird in diesem Artikel erläutert, wie gelöschte Kontakte auf einfache Weise wiederhergestellt werden können. 1. Verstehen Sie den WeChat-Kontaktlöschmechanismus. Dies bietet uns die Möglichkeit, gelöschte Kontakte wiederherzustellen. Der Kontaktlöschmechanismus in WeChat entfernt sie aus dem Adressbuch, löscht sie jedoch nicht vollständig. 2. Nutzen Sie die integrierte „Kontaktbuch-Wiederherstellung“-Funktion von WeChat, um Zeit und Energie zu sparen. Mit dieser Funktion können Benutzer schnell gelöschte Kontakte wiederherstellen. 3. Rufen Sie die WeChat-Einstellungsseite auf und klicken Sie auf die untere rechte Ecke, öffnen Sie die WeChat-Anwendung „Me“ und klicken Sie auf das Einstellungssymbol in der oberen rechten Ecke, um die Einstellungsseite aufzurufen.

HP bringt die Softmaus Professor 1 mit drei Modi auf den Markt: 4000 DPI, Blue Shadow RAW3220, Erstpreis 99 Yuan 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 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 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

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) May 04, 2024 pm 06:01 PM

Mobile Spiele sind mit der Entwicklung der Technologie zu einem festen Bestandteil des Lebens der Menschen geworden. Mit seinem niedlichen Drachenei-Bild und dem interessanten Schlüpfvorgang hat es die Aufmerksamkeit vieler Spieler auf sich gezogen, und eines der Spiele, das viel Aufmerksamkeit erregt hat, ist die mobile Version von Dragon Egg. Um den Spielern dabei zu helfen, ihre eigenen Drachen im Spiel besser zu kultivieren und zu züchten, erfahren Sie in diesem Artikel, wie Sie Dracheneier in der mobilen Version ausbrüten. 1. Wählen Sie den geeigneten Drachenei-Typ aus, der Ihnen gefällt und zu Ihnen passt, basierend auf den verschiedenen Arten von Drachenei-Attributen und -Fähigkeiten, die im Spiel zur Verfügung stehen. 2. Verbessern Sie die Stufe der Brutmaschine, indem Sie Aufgaben erledigen und Requisiten sammeln. Die Stufe der Brutmaschine bestimmt die Schlüpfgeschwindigkeit und die Erfolgsquote beim Schlüpfen. 3. Sammeln Sie die Ressourcen, die die Spieler zum Schlüpfen benötigen

So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) May 07, 2024 pm 03:34 PM

Das Festlegen der Schriftgröße ist zu einer wichtigen Personalisierungsanforderung geworden, da Mobiltelefone zu einem wichtigen Werkzeug im täglichen Leben der Menschen geworden sind. Um den Bedürfnissen verschiedener Benutzer gerecht zu werden, wird in diesem Artikel erläutert, wie Sie das Nutzungserlebnis Ihres Mobiltelefons verbessern und die Schriftgröße des Mobiltelefons durch einfache Vorgänge anpassen können. Warum müssen Sie die Schriftgröße Ihres Mobiltelefons anpassen? Durch Anpassen der Schriftgröße kann der Text klarer und leichter lesbar werden. Geeignet für die Lesebedürfnisse von Benutzern unterschiedlichen Alters. Praktisch für Benutzer mit Sehbehinderung, die Schriftgröße zu verwenden Einstellungsfunktion des Mobiltelefonsystems – So rufen Sie die Systemeinstellungsoberfläche auf – Suchen und geben Sie die Option „Anzeige“ in der Einstellungsoberfläche ein – suchen Sie die Option „Schriftgröße“ und passen Sie sie mit einem Drittanbieter an Anwendung – Laden Sie eine Anwendung herunter und installieren Sie sie, die die Anpassung der Schriftgröße unterstützt – öffnen Sie die Anwendung und rufen Sie die entsprechende Einstellungsoberfläche auf – je nach Person

Der Unterschied zwischen Methoden und Funktionen der Go-Sprache und Analyse von Anwendungsszenarien Der Unterschied zwischen Methoden und Funktionen der Go-Sprache und Analyse von Anwendungsszenarien Apr 04, 2024 am 09:24 AM

Der Unterschied zwischen Methoden und Funktionen der Go-Sprache liegt in ihrer Verknüpfung mit Strukturen: Methoden sind mit Strukturen verknüpft und werden zum Betrieb von Strukturdaten verwendet, oder Methodenfunktionen sind unabhängig von Typen und werden zum Ausführen allgemeiner Operationen verwendet.

See all articles