软件学堂

网游分类软件分类

JS实现用键盘控制图片移动

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实现用键盘控制图片移动 进行本实例源码下载 

上一篇:Photoshop利用LAB模式为美女照片调色技巧
下一篇:JS实现预装载图片提高站点速度

相关文章