用键盘事件实现div移动
键盘事件:onkeydown 按键按下,连续按下时,第一次和第二次会停顿一下,防止误操作
onkeyup 按键松开
这两个事件一般会绑定给可以获取焦点的一些元素或者document元素
可通过keyCode来获取按键的编码
除此之外还有altkey,shiftkey,ctrlkey
keyCode 37左 38上 39 右 40下
js代码如下:
<script type="text/javascript">
/*
键盘事件:onkeydown 按键按下,连续按下时,第一次和第二次会停顿一下,防止误操作
onkeyup 按键松开
这两个事件一般会绑定给可以获取焦点的一些元素或者document元素
可通过keyCode来获取按键的编码
除此之外还有altkey,shiftkey,ctrlkey
keyCode 37左 38上 39 右 40下
* */
window.onload = function(){
var box16 = document.getElementById('box16');
var speed = 10;
document.onkeydown = function(event){
event = event || window.event;
if(event.keyCode == 37){//向左
box16.style.left = box16.offsetLeft-speed+"px";
}else if(event.keyCode == 40){//向下
box16.style.top = box16.offsetTop+speed+"px";
}else if(event.keyCode == 39){//向右
box16.style.left = box16.offsetLeft+speed+"px";
}else{//向上
box16.style.top = box16.offsetTop-speed+"px";
}
};
};
</script>
html代码如下:
<body>
<div id="box16"></div>
</body>
样式代码如下:
<style type="text/css">
#box16{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>