Java物体上下移动代码_JS实现元素上下左右移动效果

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

Document

a {

cursor: pointer;

}

#cell {

width: 30px;

height: 30px;

background: red;

position: relative;

left: 0;

top: 0;

}

友情提示：请按键盘上的上下左右键

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';

}

}

}

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