suchen

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

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中世界最好的语言
php中世界最好的语言Original
2018-06-02 10:03:491442Durchsuche

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

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:

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!

Stellungnahme：
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
Vorheriger Artikel：So verwenden Sie jQuery zum Wechseln der Schriftarten, indem Sie auf den Titeltext klickenNächster Artikel：So verwenden Sie jQuery zum Wechseln der Schriftarten, indem Sie auf den Titeltext klicken

In Verbindung stehende Artikel

Mehr sehen