📄 15.24 用键盘控制图片移动.htm
字号:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<script language="JavaScript">
var key=0
var timer
function setObj()
{
ietype = (document.layers) ? 1 : 0; //判断浏览器类型
divObj = (ietype)? document.mydiv : mydiv.style //获取指定的div
Xpos = parseInt(divObj.left); //获取div的X坐标
Ypos = parseInt(divObj.top); //获取div的Y坐标
document.onkeydown = keyDown; //设置按键事件
document.onkeyup = keyUp; //设置键盘弹起的事件
if (ietype) document.captureEvents(Event.keydown | Event.keyup);
}
function keyDown(e) //按键的操作
{
key = (ietype)? e.which : event.keyCode
//判断用户按下的键，注意此键盘包括方向键和小键盘（数字键）
if (key == 108 || key == 37) moveObj(1,2);
if (key == 114 || key == 39) moveObj(1,3);
if (key == 100 || key == 40) moveObj(1,4);
if (key == 117 || key == 38) moveObj(1,5);
}
function keyUp(e) //按键弹起的操作
{
key=0;clearTimeout(timer);
}
function moveObj(t,u) //移动图片的方法
{
clearTimeout(timer)
if (t==1){
//根据移动的键，改变div的X和Y坐标
if (u==2){divObj.left = Xpos-=5;timer = setTimeout("moveObj(1,2)", 40);}
if (u==3){divObj.left = Xpos+=5;timer = setTimeout("moveObj(1,3)", 40);}
if (u==4){divObj.top = Ypos+=5;timer = setTimeout("moveObj(1,4)", 40);}
if (u==5){divObj.top = Ypos-=5;timer = setTimeout("moveObj(1,5)", 40);}
}
}
</script>
<body OnLoad="setObj();focus()">
<div id="mydiv" style="position:absolute; left:0px; top:80px;">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
</div></body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -