So binden Sie Pfeiltasten, um die Div-Bewegung zu steuern
Jun 04, 2018 pm 03:37 PMDieses Mal zeige ich Ihnen, wie Sie die Richtungstasten binden, um die Bewegung eines Divs zu steuern, und welche Vorsichtsma?nahmen es gibt, um die Richtungstasten zu binden, um die Bewegung eines Divs zu steuern Praktischer Fall, werfen wir einen Blick darauf.
Wenn die <a href="http://www.miracleart.cn/wiki/902.html" target="_blank">Position<code><a href="http://www.miracleart.cn/wiki/902.html" target="_blank">position</a>
Wenn die Wenn das Attribut absolut oder relativ ist, k?nnen wir die Position des Elements steuern, indem wir die spezifischen Werte von links und oben ?ndern Attribute dieses Elements. Die auf der Seite angezeigte Position.
Mithilfe der oben genannten Attribute k?nnen wir einfach den Bewegungseffekt eines Elements auf der Seite implementieren. Hier verwenden wir die -Methode von JQueryanimate
, um den Animationseffekt zu erzielen und zu verwenden keydown
um das gedrückte Ereignis der Richtungstaste zu überwachen (keydown wird hier anstelle von keyup verwendet, damit sich das Element weiter bewegen kann, wenn die Richtungstaste gedrückt wird. Keydown wartet auf das gedrückte Ereignis und keyup wartet auf die Taste Release-Ereignis). Hier k?nnen wir auch eine Funktion der animate
-Methode nutzen, die darin besteht, dass, wenn der Wert ihres Attributs ?+=“ oder ?-=“ ist, zun?chst auf der Grundlage des ursprünglichen Werts berechnet und dieser dann zugewiesen wird Das entsprechende Attribut stimmt mit dem C++--Operator überein.
Der Kerncode lautet wie folgt:
$(document).keydown(function(event){ ????var?keyNum?=?event.which;??//獲取鍵值 ????var?Item?=?$('#switcher');??//要移動的元素 ????Item.css({position:'relative'});?//設置position ????switch(keyNum){?//判斷按鍵 ????case?37:?Item.animate({left:'-=20px'});break; ????case?38:?Item.animate({top:'-=20px'});break; ????case?39:?Item.animate({left:'+=20px'});break; ????case?40:?Item.animate({top:'+=20px'});break; ????default: ??????break; ????} });
Der vollst?ndige Beispielcode lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>?jQuery控制p移動</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <p id="switcher" style="width:200px;height:200px;border:solid 1px #000;"> </p> <script> $(document).keydown(function(event){ ????var?keyNum?=?event.which;??//獲取鍵值 ????var?Item?=?$('#switcher');??//要移動的元素 ????Item.css({position:'relative'});?//設置position ????switch(keyNum){?//判斷按鍵 ????case?37:?Item.animate({left:'-=20px'});break; ????case?38:?Item.animate({top:'-=20px'});break; ????case?39:?Item.animate({left:'+=20px'});break; ????case?40:?Item.animate({top:'+=20px'});break; ????default: ??????break; ????} }); </script> </body> </html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!
Empfohlene Lektüre:
So bedienen Sie eine CSS-Datei mit r.js
So drucken Sie Protokollinformationen auf der Konsole
Das obige ist der detaillierte Inhalt vonSo binden Sie Pfeiltasten, um die Div-Bewegung zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

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)

Kann der Appdata-Ordner auf das Laufwerk D verschoben werden? Mit zunehmender Beliebtheit der Computernutzung werden immer mehr pers?nliche Daten und Anwendungen der Benutzer auf dem Computer gespeichert. Im Windows-Betriebssystem gibt es einen speziellen Ordner namens Appdata-Ordner, der zum Speichern der Anwendungsdaten des Benutzers verwendet wird. Viele Benutzer fragen sich, ob dieser Ordner aus Datenverwaltungs- und Sicherheitsgründen auf das Laufwerk D oder andere Datentr?ger verschoben werden kann. In diesem Artikel werden wir dieses Problem diskutieren und einige L?sungen anbieten. Lassen Sie mich zuerst

Microsoft hat in der neuesten Windows 11-Version den Namen von PhoneLink in MobileDevice ge?ndert. Diese ?nderung erm?glicht es Benutzern, den Computerzugriff auf mobile Ger?te über Eingabeaufforderungen zu steuern. In diesem Artikel wird erl?utert, wie Sie Einstellungen auf Ihrem Computer verwalten, die den Zugriff von Mobilger?ten aus zulassen oder verweigern. Mit dieser Funktion k?nnen Sie Ihr Mobilger?t konfigurieren und es mit Ihrem Computer verbinden, um Textnachrichten zu senden und zu empfangen, mobile Anwendungen zu steuern, Kontakte anzuzeigen, Telefonanrufe zu t?tigen, Galerien anzuzeigen und vieles mehr. Ist es eine gute Idee, Ihr Telefon an Ihren PC anzuschlie?en? Die Verbindung Ihres Telefons mit Ihrem Windows-PC ist eine komfortable M?glichkeit und erleichtert die übertragung von Funktionen und Medien. Dies ist nützlich für diejenigen, die ihren Computer verwenden müssen, wenn ihr Mobilger?t nicht verfügbar ist

Die Nummer beginnend mit 151 ist das Nummernsegment des Mobilfunkanbieters. 151 ist einer der Nummernbl?cke von China Mobile im Jahr 2008. Es ist auch der vierte Nummernblock, der nach 158, 159 und 150 nicht mit ?13“ beginnt. Der Zweck der Er?ffnung des 151-Blocks besteht darin, den Mangel an Zahlenressourcen zu lindern.

?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

Mobile 184 beginnt mit dem exklusiven China Mobile-Nummernsegment des virtuellen Betreibers. Die ersten drei Ziffern des Mobiltelefonnummernsegments stellen im Allgemeinen die Netzwerkidentifikationsnummer dar, 4 bis 7 Ziffern stellen die Vorwahl dar und 8 bis 11 Ziffern sind die eindeutige Nummer des Benutzers. Im zugewiesenen Nummernsegment waren damals Nummern, die mit 10 begannen, Servicenummern für die Telekommunikationsbranche, wie z. B. 10000 Telecom Service Center, 10010 China Unicom Service Center und 10086 Mobile Service Center, die mit 11 begannen, spezielle Servicenummern, wie z wie 110, 119 usw.

Die Sternebewertungen mobiler Benutzer sind in fünf Stufen unterteilt: 1 Stern, 2 Sterne, 3 Sterne, 4 Sterne und 5 Sterne. Die fünf Sterne sind weiter in Fünf-Sterne-Gold, Fünf-Sterne-Silber und Fünf-Sterne-Diamant unterteilt Je h?her die Sternebewertung, desto mehr Servicevorteile erhalten Sie. Die Bewertung der Sternebewertung erfolgt einmal im Jahr und ist ein Jahr lang gültig; bei einer Anpassung der Sternebewertung erfolgt gleichzeitig eine Anpassung der Sternebewertung.

Verwenden Sie PHP zur Steuerung der Kamera: Analysieren Sie den gesamten Prozess von der Verbindung bis zur Aufnahme. Kameraanwendungen wie Videoanrufe, überwachungssysteme usw. werden immer weiter verbreitet. In Webanwendungen müssen wir h?ufig Kameras über PHP steuern und bedienen. In diesem Artikel wird erl?utert, wie Sie mit PHP den gesamten Prozess von der Kameraverbindung bis zur Aufnahme realisieren. Best?tigen Sie den Verbindungsstatus der Kamera. Bevor wir mit der Bedienung der Kamera beginnen, müssen wir zun?chst den Verbindungsstatus der Kamera best?tigen. PHP stellt eine Video-Erweiterungsbibliothek zur Bedienung der Kamera bereit. Wir k?nnen den folgenden Code übergeben

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
