當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS-键盘事件之方向键移动元素
生活随笔
收集整理的這篇文章主要介紹了
JS-键盘事件之方向键移动元素
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
注意三點(diǎn)：
?1：事件名稱onkeydown。
?2：事件加給document，而非window。
?3： 把元素的top，left值分別用offsetTop，offsetLeft來(lái)設(shè)定。
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>鍵盤移動(dòng)</title><style type="text/css">*{margin: 0;padding: 0;}h3{position: absolute;width: 200px;background: cadetblue;color: #fff;padding: 20px;}</style></head><body><h3 id="h3">注意三點(diǎn)：<br />1：事件名稱onkeydown<br />2：事件加給document，而非window。<br />3： 把元素的top，left值分別用offsetTop，offsetLeft來(lái)設(shè)定</h3></body>js效果：【這里用了switch語(yǔ)句來(lái)進(jìn)行判斷】
<script type="text/javascript">window.onload = function(){var oH3 = document.getElementById("h3");document.onkeydown = function(ev){var ev = ev || window.event;switch(ev.keyCode){case 37:case 100:oH3.style.left = oH3.offsetLeft - 10 + "px";break;case 38:case 104:oH3.style.top = oH3.offsetTop - 10 + "px";break;case 39:case 102:oH3.style.left = oH3.offsetLeft + 10 + "px";break;case 40:case 98:oH3.style.top = oH3.offsetTop + 10 + "px";break;default:console.log("請(qǐng)按上下左右鍵");break;}console.log(oH3.offsetTop+"+"+oH3.style.top);console.log(ev.keyCode);}}</script>鍵值 keyCode說(shuō)明：
數(shù)字小鍵盤中對(duì)應(yīng)的上下左右：
總結(jié)
以上是生活随笔為你收集整理的JS-键盘事件之方向键移动元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 爱了!再来推荐5个Java项目开发快速开
- 下一篇： HDU - 5441 Travel 离线