js鍵盤操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼

千里之行，始于足下。讓知識(shí)帶有溫度。第第2頁/共2頁精品文檔推薦js鍵盤操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼js鍵盤操作實(shí)現(xiàn)div的移動(dòng)或轉(zhuǎn)變的原理及代碼

js鍵盤操作實(shí)現(xiàn)div的移動(dòng)或轉(zhuǎn)變的原理及代碼

昨天記錄了獵取鍵盤按鍵的值的大事，有了值，無非就是針對(duì)不同值做不同的操作嘛，而且之前曾經(jīng)在寫貪吃蛇時(shí)也用到過。結(jié)果一捯飭，又是好久的一段時(shí)間，所以感覺有必要記錄下的，一方面確有可取之處，另一方面也對(duì)自己的提示，剛剛實(shí)現(xiàn)過的功能轉(zhuǎn)頭又是生疏人了，總的來說，算是溫故而知新吧。

這樣我們先來分析，要實(shí)現(xiàn)鍵盤操作實(shí)現(xiàn)div的移動(dòng)也許的原理吧：

*要實(shí)現(xiàn)div的移動(dòng)，首先最關(guān)鍵的一點(diǎn)：獵取div對(duì)象

*postion：absolute將div完全從文檔流中拖出啊，這個(gè)地方漏掉了，回去看了貪吃蛇才發(fā)覺的.，真暈

*獵取鍵盤的操作

*依據(jù)鍵盤的不同操作，給出不同響應(yīng)

這就是我想起的也許需要留意的地方，還是先來看代碼：

先是html部分

然后記錄下javascript的實(shí)際操作

window.onload=function(){varobj=document.getElementById(showZone);//獵取到對(duì)象了吧，這最簡潔vara=10;vartoLeft=toRight=toTop=toBottom=false;//定義幾個(gè)boolean型變量，是為了后面方向操作用的，看是四個(gè)方向吧varmove=setInterval(function(){//這個(gè)地方的move定義實(shí)際上毫無意義，只是為了讓這個(gè)方法更明顯一點(diǎn)if(toLeft){obj.style.left=parseInt(obj.offsetLeft-a)+px;//感覺最好還是寫上parseInt，另外，由于offsetLeft是不含px的，所以不要遺忘“px”}if(toRight){obj.style.left=obj.offsetLeft+a+px;//不寫parseInt也可以，莫非是由于javascript的執(zhí)行挨次？執(zhí)行+，再執(zhí)行+，再執(zhí)行=？實(shí)現(xiàn)結(jié)果來看是}if(toTop){obj.style.top=obj.offsetTop-a+px;}if(toBottom){obj.style.top=obj.offsetTop+a+px;}},300);//這個(gè)經(jīng)典的定時(shí)器啊，循環(huán)執(zhí)行的大神器，還記得setInterval和settimeout的區(qū)分么document.onkeydown=function(event){varevent=event||window.event;switch(event.keyCode){//哈哈，獵取到鍵盤操作了吧case37:toLeft=true;break;//轉(zhuǎn)變變量，連續(xù)執(zhí)行最初的循環(huán)，不讓你停不能停啊case38:toTop=true;break;case39:toRight=true;break;case40:toBottom=true;break;}};document.onkeyup=function(event){switch(event.keyCode){case37:toLeft=false;break;//給我變回來，讓你停就別動(dòng)了case38:toTop=false;break;case39:toRight=false;break;case40:toBottom=false;break;}};};

就這樣，我們完成了原理分析中的需求，同時(shí)也就可以通過上、下、左、右按鍵來實(shí)現(xiàn)div的上下左右移動(dòng)了，接下來，再來記錄下敏感地方吧。

1、div需是absolute的，為這個(gè)糾結(jié)了半天實(shí)在不值得，于是查詢了下，了解了一個(gè)概念“文檔流”，

文檔流，通常說是元素從上而下，自左向右進(jìn)行排列，那么這個(gè)元素就是節(jié)點(diǎn)元素，浩大的dom啊。還是先來說說其它解釋吧，我比較喜愛的是這樣來闡述：文檔+流，文檔顧名思義就是說網(wǎng)頁文檔，而流則是輸出方式，還有的解釋說是掃瞄器的解析方式，這個(gè)貌似更形象一點(diǎn)，正常的文檔流，就似乎是一個(gè)平面，而一個(gè)元素你把它放在哪了，它就在哪，而浮動(dòng)、固定定位和相對(duì)定位，這里分析absolute，就是重新生成了一個(gè)流，脫離了它的父層標(biāo)簽，就似乎之前z-index為0，而這個(gè)的z-index就上了它的上面，憑空懸浮在它上面的，可以通過left、top來肆意的挪動(dòng)它。

也許意思能夠明白了，但是感覺有些地方還是沒法有效的用語言來表述，而且有些點(diǎn)略微有些模糊，信任隨著閱歷的累積，我能理解的更深一些。

2、keyCode這里的大寫，onkeyup和onkeydown這里的小寫，在這個(gè)地方也是測試了下才發(fā)覺的問題，對(duì)于javascript，每個(gè)小地方都是大問題啊；

3、switch里的break；這個(gè)java里面就常遇到，就不多說了

也許的問題就是以上幾點(diǎn)，而你還記得解釋的快捷鍵么，還記得其他快捷鍵么，這就消失了一個(gè)問題，上面做出響應(yīng)的我們只是針對(duì)單個(gè)按鍵，假如我們想用一些快捷鍵呢，該怎么設(shè)置呢？

先來看下代碼：

document.onkeydown=function(event){//還是跟上面差不多的代碼吧，你看出不同在哪里了么varevent=event||window.event;varbctrl=event.ctrlKey;//在這里switch(event.keyCode){case37:toLeft=true;break;case38:if(bctrl){obj.style.background=yellow;break;}toTop=true;break;//在這里，case39:toRight=true;break;case40:toBottom=true;break;}};

這里遇到了event對(duì)象的另一個(gè)屬性，是在keyCode之外的另一個(gè)，ctrlKey，還是大寫哦，它的主要功能是檢查ctrl按鍵的狀態(tài)，其實(shí)這樣的還有兩個(gè)：

altKey和shiftKey，分別是對(duì)alt按鍵和shift按鍵狀態(tài)的檢查，這樣知道怎么設(shè)個(gè)快捷鍵了吧。

其實(shí)假如是我自己寫的話，可能這樣我就已經(jīng)很滿意了，但是在翻閱搜尋的時(shí)候，總能遇到心思縝密的朋友

附上代碼，你知道是要做什么么：

functionlimit(){vardoc=[document.documentElement.clientWidth,document.documentElement.clientHeight]//防止左側(cè)溢出obj.offsetLeft=0(obj.style.left=0);//防止頂部溢出obj.offsetTop=0(obj.style.top=0);//防止右側(cè)溢出doc[0]-obj.offsetLeft-obj.offsetWidth=0(obj.style.left=doc[0]-obj.offsetWidth+px);//防止底部溢出doc[1]-obj.offsetTop-obj.offs