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>
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
, 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 erzielenWie man jQuery verwendet, um das zu implementieren Mit der Maus über kleine Bilder von Produkten gleiten. Das entsprechende große Bild anzeigenDas 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!
