Ausführliche Erläuterung der Schritte für jQuery, um Divs so zu steuern, dass sie sich mit den Pfeiltasten nach oben, unten, links und rechts bewegen

Dieses Mal erkläre ich Ihnen ausführlich die Schritte für jQuery, um Divs so zu steuern, dass sie sich mit den Pfeiltasten nach oben, unten, links und rechts bewegen. Was sind die Vorsichtsmaßnahmen ? Für die Verwendung von jQuery zur Steuerung der Bewegung von Divs nach oben, unten, links und rechts durch die Pfeiltasten werfen wir einen Blick auf praktische Fälle.

Wenn die <a href="http://www.php.cn/wiki/902.html" target="_blank">Position<code><a href="http://www.php.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 realisieren. Hier verwenden wir die animate-Methode von JQuery, um den Animationseffekt zu erzielen, und verwenden keydown, um das Ereignis zu überwachen Pfeiltaste wird gedrückt (Keydown wird hier anstelle von Keyup verwendet, damit sich das Element weiter bewegen kann, wenn die Richtungstaste gedrückt wird. Keydown wartet auf das Press-Ereignis und Keyup wartet auf das Tastenfreigabeereignis ). 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:

<script>
$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $(&amp;#39;#switcher&amp;#39;);  //要移动的元素
    Item.css({position:&amp;#39;relative&amp;#39;}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:&amp;#39;-=20px&amp;#39;});break;
    case 38: Item.animate({top:&amp;#39;-=20px&amp;#39;});break;
    case 39: Item.animate({left:&amp;#39;+=20px&amp;#39;});break;
    case 40: Item.animate({top:&amp;#39;+=20px&amp;#39;});break;
    default:
      break;
    }
});
</script>

Ich glaube, dass Sie die Methode nach dem Lesen beherrschen Der Fall in diesem Artikel, mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung der elektronischen Uhrfunktion mit jQuery

Detaillierte Erläuterung der Verwendung des Vue nextTick-Mechanismus

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte für jQuery, um Divs so zu steuern, dass sie sich mit den Pfeiltasten nach oben, unten, links und rechts bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!