JavaScript方向鍵調整div元素的位置
分享一段程式碼例項,它實現了利用上下左右方向鍵調整div元素位置的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { background-color: #333; margin: 0; padding: 0; } #antzone { width: 50px; height: 50px; background-color: #FFF; position: absolute; } </style> <script type="text/javascript"> document.onkeydown = function(ev) { var oEvent = ev||event; var div1 = document.getElementById("antzone"); if(oEvent.keyCode == 37) { div1.style.left = div1.offsetLeft - 15+ "px"; } else if(oEvent.keyCode == 39) { div1.style.left = div1.offsetLeft + 15 + "px"; } else if(oEvent.keyCode == 38) { div1.style.top = div1.offsetTop - 15 + "px"; } else if(oEvent.keyCode == 40) { div1.style.top = div1.offsetTop + 15 + "px"; } } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).onkeydown事件可以參閱JavaScript keydown事件一章節。
(2).offsetLeft可以參閱offsetleft一章節。
(3).keyCode可以參閱JavaScript event.keyCode一章節。
(4).offsetTop可以參閱JavaScript offsetTop一章節。
相關文章
- 2018.3.29 DIV位置調整程式碼
- JavaScript拖動調整元素的尺寸JavaScript
- JavaScript滑鼠拖動調整div大小JavaScript
- JavaScript 拖動調整元素尺寸JavaScript
- JavaScript 調整li元素上下順序JavaScript
- js通過拖動調整元素位置程式碼例項JS
- UITableViewCell分割線位置調整UIView
- javaScript實現鍵盤控制元素移動位置及縮放JavaScript
- 資料檔案位置調整
- 通過拖動實現調整元素之間位置程式碼例項
- cad旋轉的快捷鍵命令 cad旋轉方向怎麼調整
- JavaScript拖動div元素詳解JavaScript
- JavaScript 元素在document文件中位置JavaScript
- js實現的通過拖動調整元素間的相對位置程式碼例項JS
- win10系統中如何調整紙張方向_win10word如何調整紙張方向Win10
- jQuery調整li元素順序jQuery
- 調整 JavaScript 抽象的迭代方案JavaScript抽象
- 調整JavaScript 抽象的迭代方案JavaScript抽象
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- JavaScript獲取當前li元素的索引位置JavaScript索引
- JavaScript 陣列 指定索引位置插入元素JavaScript陣列索引
- js拖動調整元素寬度JS
- 譯|調整JavaScript抽象的迭代方案JavaScript抽象
- JavaScript調整option順序JavaScript
- javascript div元素滑鼠拖動效果詳解JavaScript
- JavaScript點選按鈕刪除div元素JavaScript
- JavaScript動態新增和刪除div元素JavaScript
- 方向鍵控制元素移動程式碼例項
- JavaScript 陣列的指定位置插入多個元素JavaScript陣列
- JavaScript陣列指定位置插入新元素JavaScript陣列
- Javascript刷題 》 查詢陣列元素位置JavaScript陣列
- excel中如何調整橫座標的刻度位置Excel
- 關於快速排序中元素調整方法的分析排序
- win10印表機如何調整列印方向_win10調整印表機方向的設定方法Win10
- js實現的使用鍵盤操作div位置程式碼例項JS
- JavaScript動畫方式控制div元素的隱藏和顯示JavaScript動畫
- android程式碼中動態調整圖片的位置Android
- javascript獲取當前li元素在集合中的位置JavaScript