html xmlns=http://www。w3。org/1999/xhtml headtitle標(biāo)題頁-學(xué)無憂(www。xue51。com)/title/headscript language=JavaScriptvar key=0var timerfunction setObj(){ ietype = (document。

layers) ? 1 : 0; //判斷瀏覽器類型 divObj = (ietype)? document。mydiv : mydiv。style //獲取指定的div Xpos = parseInt(divObj。left); //獲取div的X坐標(biāo) Ypos = parseInt(divObj。

top); //獲取div的Y坐標(biāo) document。onkeydown = keyDown; //設(shè)置按鍵事件 document。onkeyup = keyUp; //設(shè)置鍵盤彈起的事件 if (ietype) document。captureEvents(Event。

keydown | Event。keyup);}function keyDown(e) //按鍵的操作{ key = (ietype)? e。which : event。keyCode //判斷用戶按下的鍵，注意此鍵盤包括方向鍵和小鍵盤(數(shù)字鍵) 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) //移動(dòng)圖片的方法{ clearTimeout(timer)if (t==1){ //根據(jù)移動(dòng)的鍵，改變div的X和Y坐標(biāo)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);} }}/scriptbody 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。

全部

總結(jié)

以上是生活随笔為你收集整理的html绑定按键图片移动,如何使用JS实现用键盘控制图片移动呢？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。