Comment déplacer un élément avec les flèches du clavier en jQuery

Vous pouvez utiliser la méthode keydown() de jQuery en combinaison avec la méthode animate() pour déplacer un élément tel que <div> dans les directions gauche, droite, haut et bas en appuyant sur les flèches correspondantes du clavier. Découvrez l’exemple ci-dessous.
 
 

Code HTML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>déplacer un élément avec les flèches du clavier</title>
		<style type="text/css">
			/* Mettez le code css ici. */
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Mettez le code jQuery ici.
		</script>
	</head>
	<body>
		<p><b>Cliquez ici pour déplacer l'objet.</b></p>
		<div class="myDiv"></div>
	</body>
</html>

 
 

Code jQuery:
$(document).keydown(function(e){
    switch (e.which){
    case 37:    // flèche gauche
        $(".myDiv").finish().animate({
            left: "-=10"
        });
        break;
    case 38:    // flèche haut
        $(".myDiv").finish().animate({
            top: "-=10"
        });
        break;
    case 39:    // flèche droite
        $(".myDiv").finish().animate({
            left: "+=10"
        });
        break;
    case 40:    // flèche du bas
        $(".myDiv").finish().animate({
            top: "+=10"
        });
        break;
    }
});

 

Code CSS:
.myDiv {
    width: 150px;
    height: 53px;
    position: relative;
    margin: 100px auto 0;
    background: url("https://1.bp.blogspot.com/-I-a7SivlqkY/XR1iGIJh0FI/AAAAAAAAFEk/ynto7iWeqxkjhxH5UDMywUYHad3fFMHTACLcBGAs/s1600/carr2.png");
    background-repeat: no-repeat;
}
Résultat

Cliquez ici pour déplacer l'objet.

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *