2012-11-08 来源:网络
【实例名称】
JS实现用键盘控制图片移动
【实例描述】
本例学习如何实现可用键盘控制图片的上、下、左、右移动,类似在游戏中的效果。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</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>
【运行效果】
【难点剖析】
本例的重点是判断键盘的按键,以及动态改变图片的位置。图片所在的位置是一个div层,首先通过控件的“Left”和“Top”属性,获取此层的x坐标和y坐标。然后通过“event.keyCode”属性获取用户的按键。最后根据按键在“moveObj”方法中改变div控件的坐标。
【源码下载】
为了JS代码的准确性,请点击:JS实现用键盘控制图片移动 进行本实例源码下载