注意三点:
1:事件名称onkeydown。
2:事件加给document,而非window。
3: 把元素的top,left值分别用offsetTop,offsetLeft来设定。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>键盘移动</title><style type="text/css">*{margin: 0;padding: 0;}h3{position: absolute;width: 200px;background: cadetblue;color: #fff;padding: 20px;}</style></head><body><h3 id="h3">注意三点:<br />1:事件名称onkeydown<br />2:事件加给document,而非window。<br />3: 把元素的top,left值分别用offsetTop,offsetLeft来设定</h3></body>
js效果:【这里用了switch语句来进行判断】
<script type="text/javascript">window.onload = function(){var oH3 = document.getElementById("h3");document.onkeydown = function(ev){var ev = ev || window.event;switch(ev.keyCode){case 37:case 100:oH3.style.left = oH3.offsetLeft - 10 + "px";break;case 38:case 104:oH3.style.top = oH3.offsetTop - 10 + "px";break;case 39:case 102:oH3.style.left = oH3.offsetLeft + 10 + "px";break;case 40:case 98:oH3.style.top = oH3.offsetTop + 10 + "px";break;default:console.log("请按上下左右键");break;}console.log(oH3.offsetTop+"+"+oH3.style.top);console.log(ev.keyCode);}}</script>
键值 keyCode说明:
数字小键盘中对应的上下左右: