JS实现元素上下左右移动效果

2024-05-06 16:40:25

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了JS实现元素上下左右移动的具体代码，供大家参考，具体内容如下

<!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>  <div id="cell"></div>  <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 + 'px';      //注意要用parseInt 因为a.style.top类型是字符串     }     if(e.keyCode == 40) { //down      a.style.top = parseInt(a.style.top) + 50 + 'px';     }     if(e.keyCode == 37) { //left      a.style.left = parseInt(a.style.left) - 50 + 'px';     }     if(e.keyCode == 39) { //right      a.style.left = parseInt(a.style.left) + 50 + 'px';     }    }   }  </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JS去掉字符串中所有的逗号

下一篇：JS实现按钮颜色切换效果