JS implémente le déplacement des éléments vers le haut, le bas, la gauche et la droite-js tutoriel-php.cn

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

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