So binden Sie Pfeiltasten, um die Div-Bewegung zu steuern-js-Tutorial-php.cn

So binden Sie Pfeiltasten, um die Div-Bewegung zu steuern

php中世界最好的语言

Freigeben： 2018-06-04 15:37:44

Original

2125 Leute haben es durchsucht

Dieses 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.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 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;
    }
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!