前言
路橋網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,路橋網(wǎng)站設計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為路橋上1000家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿營銷網(wǎng)站建設要多少錢,請找那個售后服務好的路橋做網(wǎng)站的公司定做!
在生活中肯定有玩過貪吃蛇的游戲,那么要怎么樣用鍵盤碼來實現(xiàn)div的移動呢?下面就分享一個Demo。
利用鍵盤碼來控制div移動源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 100px; width: 100px; background-color: red; position: absolute; } </style> </head> <body> <!--keyCode 鍵盤碼 在鍵盤事件發(fā)生的時候 記錄對應按的哪個鍵--> <div id="box"></div> <!--讓鍵盤控制div的移動--> <script type="text/javascript"> var oBox = document.getElementById("box") var x = 0 var y = 0 document.onkeyup = function(ev) { var ev = ev || event // 指定方向鍵 ,w(上-->87),a(左-->83),s(下-->65),d(右-->67) // 通過keyCode來識別當前按的是哪個鍵 // x += 10 // oBox.style.left = x +"px" // 根據(jù)鍵盤碼來確定往哪個方向移動 switch(ev.keyCode) { case 87: // 往上移動 y -= 20 break case 83: // 往下移動 y += 20 break case 65: // x -= 20 break case 68: x += 20 break default: break } oBox.style.left = x + "px" oBox.style.top = y + "px" } </script> </body> </html>
上面就是Demo的所有源碼,我們可以通過鍵盤碼來控制div來移動,里面具體的參數(shù)可以自己修改。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當前題目:JavaScript利用鍵盤碼控制div移動
文章起源:http://muchs.cn/article16/jojjdg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供響應式網(wǎng)站、網(wǎng)頁設計公司、軟件開發(fā)、網(wǎng)站改版、全網(wǎng)營銷推廣、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)