Maison > Article > interface Web > Comment lier les touches fléchées pour contrôler le mouvement div

Comment lier les touches fléchées pour contrôler le mouvement div

php中世界最好的语言original: 2018-06-04 15:37:442127parcourir

Cette fois, je vais vous montrer comment lier les touches de direction pour contrôler le mouvement d'un div, et quelles sont les précautions pour lier les touches de direction pour contrôler le mouvement d'un div. Voici une. cas pratique, jetons un coup d'oeil.

Lorsque la <a href="http://www.php.cn/wiki/902.html" target="_blank">position de l'élément DOM<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>Lorsque le L'attribut est absolu ou relatif, nous pouvons contrôler la position de l'élément en changeant les valeurs spécifiques de gauche et haut attributs de cet élément. La position affichée sur la page.

En utilisant les attributs ci-dessus, nous pouvons simplement implémenter l'effet de mouvement d'un élément sur la page. Ici, nous utilisons la méthode de JQueryanimate pour obtenir l'effet d'animation, et utilisons <.> pour surveiller les touches de direction. Événement enfoncé (keydownkeydown est utilisé ici à la place de keyup, afin que l'élément puisse continuer à bouger lorsque la touche de direction est enfoncée. Keydown écoute l'événement enfoncé et keyup écoute le relâchement de la touche. événement). Ici, nous pouvons également profiter d'une fonctionnalité de la méthode , à savoir que lorsque la valeur de son attribut est '+=' ou '-=', elle calculera d'abord en fonction de la valeur d'origine puis l'attribuera à l'attribut correspondant. Ceci est cohérent avec l'opérateur C++ animate .

Le code de base est le suivant :

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

L'exemple de code complet est le suivant :

<!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>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser un fichier CSS avec r.js

Comment imprimer les informations du journal sur la console

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer l'effet de changer de police en cliquant sur le texte du titreArticle suivant：Comment créer l'effet de changer de police en cliquant sur le texte du titre

Articles Liés

Voir plus