Maison > interface Web > js tutoriel > le corps du texte

JS implémente le déplacement des éléments vers le haut, le bas, la gauche et la droite

小云云
Libérer: 2018-01-09 13:29:16
original
2956 Les gens l'ont consulté

Cet article présente principalement en détail l'effet du déplacement d'éléments vers le haut, le bas, la gauche et la droite avec JS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.


<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style> 
  a { 
   cursor: pointer; 
  } 
  #cell { 
   width: 30px; 
   height: 30px; 
   background: red; 
   position: relative; 
   left: 0; 
   top: 0; 
  } 
 </style> 
</head> 
<body onload="move()"> 
 <p>友情提示:请按键盘上的上下左右键</p> 
 <p id="cell"></p> 
 <script> 
 
  function move() { 
   var a = document.getElementById("cell"); 
   a.style.left = 0; 
   a.style.top = 0; 
   document.onkeydown = function(e) { 
    var e = window.event ? window.event : e; 
    if(e.keyCode == 38) { //up 
     a.style.top = parseInt(a.style.top) - 50 + &#39;px&#39;; 
     //注意要用parseInt 因为a.style.top类型是字符串 
    } 
    if(e.keyCode == 40) { //down 
     a.style.top = parseInt(a.style.top) + 50 + &#39;px&#39;; 
    } 
    if(e.keyCode == 37) { //left 
     a.style.left = parseInt(a.style.left) - 50 + &#39;px&#39;; 
    } 
    if(e.keyCode == 39) { //right 
     a.style.left = parseInt(a.style.left) + 50 + &#39;px&#39;; 
    } 
   } 
  } 
 </script> 
</body> 
</html>
Copier après la connexion

Recommandations associées :

Les éléments de la liste JavaScript Select et Option se déplacent vers le haut, le bas, la gauche et la droite_Effets spéciaux de formulaire

Utiliser js pour obtenir le contenu des pseudo éléments

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal