键盘事件
思路讲解
1.在body标签中添加事件<body οnkeydοwn=”函数”>，在函数前定义初始位置
2.定义事件源比较常用方法 get。。。Id得到
3.获取按键编码 var（code）=event.keyCode输出查看编码
4.转换编码
switch（code）{case 编码：位置变化关系；break；}
5.定义事件源属性变化 事件.style.top(or left)=函数运行后的位置+“px”
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
#q1{
width:20%;
height:20%;
border:1px dashed red;
position:absolute;
left:0px;
top:0px;
}
</head>
<body οnkeydοwn="fun();">
<img id="q1" src="../img/02.jpg" />
<script>
var x=0;
var y=0;
function fun(){
//获取图片对象
var img = document.getElementById("q1");
var code=event.keyCode;//获取按下按钮的编码
// document.write(code);
switch(code)
{
case 37://左
x=x-10;
break;
case 38://上
y=y-10;
break;
case 39://右
x=x+10;
break;
case 40://下
y=y+10;
break;
}
img.style.left=x+"px";
img.style.top=y+"px";
}
</script>
</body>
</html>
#q1{
width:20%;
height:20%;
border:1px dashed red;
position:absolute;
left:0px;
top:0px;
}
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30545764/viewspace-2120992/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/30545764/viewspace-2120992/
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
