JS实现元素上下左右移动-js教程-PHP中文网

首页

web前端

js教程

JS实现元素上下左右移动

Jan 09, 2018 pm 01:29 PM

javascript 元素

本文主要为大家详细介绍了JS实现元素上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

&lt;!DOCTYPE html&gt; 
&lt;html lang=&quot;en&quot;&gt; 
&lt;head&gt; 
 &lt;meta charset=&quot;UTF-8&quot;&gt; 
 &lt;title&gt;Document&lt;/title&gt; 
 &lt;style&gt; 
  a { 
   cursor: pointer; 
  } 
  #cell { 
   width: 30px; 
   height: 30px; 
   background: red; 
   position: relative; 
   left: 0; 
   top: 0; 
  } 
 &lt;/style&gt; 
&lt;/head&gt; 
&lt;body onload=&quot;move()&quot;&gt; 
 &lt;p&gt;友情提示：请按键盘上的上下左右键&lt;/p&gt; 
 &lt;p id=&quot;cell&quot;&gt;&lt;/p&gt; 
 &lt;script&gt; 
  
  function move() { 
   var a = document.getElementById(&quot;cell&quot;); 
   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;; 
    } 
   } 
  } 
 &lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;