Explication détaillée des étapes permettant à jQuery de contrôler les divs pour se déplacer vers le haut, le bas, la gauche et la droite via les touches fléchées

Cette fois, je vous apporte une explication détaillée des étapes permettant à jQuery de contrôler les divs pour se déplacer vers le haut, le bas, la gauche et la droite via les touches fléchées. Quelles sont les précautions . pour utiliser jQuery pour contrôler les divs afin de se déplacer vers le haut, le bas, la gauche et la droite via les touches fléchées. Voici Jetons un coup d'œil à des cas pratiques.

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 réaliser l'effet de mouvement d'un élément sur la page. Ici, nous utilisons la méthode animate de JQuery pour obtenir l'effet d'animation, et utilisons keydown pour surveiller l'événement du. la touche fléchée est enfoncée (Keydown 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 de presse et keyup écoute l'événement de relâchement de touche ). Ici, nous pouvons également profiter d'une fonctionnalité de la méthode animate, à 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++ .

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 :

<script>
$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $(&amp;#39;#switcher&amp;#39;);  //要移动的元素
    Item.css({position:&amp;#39;relative&amp;#39;}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:&amp;#39;-=20px&amp;#39;});break;
    case 38: Item.animate({top:&amp;#39;-=20px&amp;#39;});break;
    case 39: Item.animate({left:&amp;#39;+=20px&amp;#39;});break;
    case 40: Item.animate({top:&amp;#39;+=20px&amp;#39;});break;
    default:
      break;
    }
});
</script>

Je crois que vous maîtrisez après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter la fonction d'horloge électronique avec jQuery

Explication détaillée de la utilisation du mécanisme Vue nextTick

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!