So verwenden Sie jQuery, um Div-Blöcke so zu steuern, dass sie sich über die Pfeiltasten nach oben, unten, links und rechts bewegen-js-Tutorial-php.cn

So verwenden Sie jQuery, um Div-Blöcke so zu steuern, dass sie sich über die Pfeiltasten nach oben, unten, links und rechts bewegen

php中世界最好的语言

Freigeben： 2018-06-02 10:03:49

Original

1441 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie jQuery verwenden, um den Div-Block so zu steuern, dass er sich mit den Pfeiltasten nach oben, unten, links und rechts bewegt, und wie Sie jQuery verwenden, um den Div-Block zu steuern Bewegen Sie sich mit den Pfeiltasten nach oben, unten, links und rechts. Was sind das? Wenn die <a href="http://www.php.cn/wiki/902.html" target="_blank">Position</a>

Wenn die Wenn das Attribut

absolut<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> 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

-Methode von JQuery, um den Animationseffekt zu erzielen, und verwenden

, um das Ereignis zu überwachen Pfeiltaste wird gedrückt (animateKeydown 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 keydown). Hier können wir uns auch eine Funktion der -Methode zunutze machen: Wenn der Wert ihres Attributs „+=“ oder „-=“ ist, berechnet sie zunächst basierend auf dem ursprünglichen Wert und weist ihn dann zu Das entsprechende Attribut stimmt mit dem C++--Operator animate ü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:

Wie man Vue verwendet, um einen Drag-and-Drop-Effekt zu erzielen

Wie man jQuery verwendet, um das zu implementieren Mit der Maus über kleine Bilder von Produkten gleiten. Das entsprechende große Bild anzeigen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um Div-Blöcke so zu steuern, dass sie sich über die Pfeiltasten nach oben, unten, links und rechts bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!