recherche

Maison >interface Web >js tutoriel >Comment utiliser jQuery pour contrôler les blocs div afin de se déplacer vers le haut, le bas, la gauche et la droite via les touches fléchées

Comment utiliser jQuery pour contrôler les blocs div afin de se déplacer vers le haut, le bas, la gauche et la droite via les touches fléchées

php中世界最好的语言
php中世界最好的语言original
2018-06-02 10:03:491442parcourir

Cette fois, je vais vous montrer comment utiliser jQuery pour contrôler le bloc div afin de se déplacer vers le haut, le bas, la gauche et la droite à l'aide des touches fléchées, et comment utiliser jQuery pour contrôler le bloc div pour déplacez-vous vers le haut, le bas, la gauche et la droite à l'aide des touches fléchées Notes Que sont-elles ? Voici des cas réels.

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 : 

<!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 Vue pour obtenir un effet glisser-déposer

Comment utiliser jQuery pour implémenter la souris glisser sur des petites images de produits Afficher la grande image correspondante

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 utiliser jQuery pour changer de police en cliquant sur le texte du titreArticle suivant：Comment utiliser jQuery pour changer de police en cliquant sur le texte du titre

Articles Liés

Voir plus