js鍵盤操作實現div的移動或改變的原理及代碼

　　js鍵盤操作實現div的移動或改變的原理及代碼

昨天記錄了獲取鍵盤按鍵的值的事件，有了值，無非就是針對不同值做不同的操作嘛，而且之前曾經在寫貪吃蛇時也用到過。結果一?意粒?質嗆鎂玫囊歡問奔洌??願芯跤斜匾?鍬枷碌模?環矯嬡酚鋅扇≈?Γ?硪環矯嬉捕宰約旱奶嶁眩?嶄帳迪止?墓δ蘢?酚質悄吧?肆耍?艿睦此擔?閌俏鹿識??擄傘?/p>

這樣我們先來分析，要實現鍵盤操作實現div的移動大概的原理吧：

*---要實現div的移動，首先最關鍵的一點：獲取div對象

*---postion：absolute將div完全從文檔流中拖出啊，這個地方漏掉了，回去看了貪吃蛇才發現的，真暈

*---獲取鍵盤的操作

*---根據鍵盤的不同操作，給出不同響應

這就是我想起的大概需要注意的`地方，還是先來看代碼：

先是html部分

然後記錄下javascript的實際操作

ad=function(){ var obj=lementById("showZone");//獲取到對象了吧，這最簡單 var a=10; var toLeft=toRight=toTop=toBottom=false;//定義幾個boolean型變量，是為了後面方向操作用的，看是四個方向吧 var move=setInterval(function(){//這個地方的move定義實際上毫無意義，只是為了讓這個方法更明顯一點 if(toLeft){ =parseInt(etLeft-a)+"px";//感覺最好還是寫上parseInt，另外，因為offsetLeft是不含px的，所以不要忘記“px” } if(toRight){ =etLeft+a+"px";//不寫parseInt也可以，難道是因為javascript的執行順序？執行+，再執行+，再執行=？實現結果來看是 } if(toTop){ =etTop-a+"px"; } if(toBottom){ =etTop+a+"px"; } },300); //這個經典的定時器啊，循環執行的大神器，還記得setInterval和settimeout的區別麼 ydown=function(event){ var event=event||t; switch(ode){ //哈哈，獲取到鍵盤操作了吧 case 37:toLeft=true;break;//改變變量，繼續執行最初的循環，不讓你停不能停啊 case 38:toTop=true;break; case 39:toRight=true;break; case 40:toBottom=true;break; } }; yup=function(event){ switch(ode){ case 37:toLeft=false;break;//給我變回來，讓你停就別動了 case 38:toTop=false;break; case 39:toRight=false;break; case 40:toBottom=false;break; } }; };

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

1、div需是absolute的，為這個糾結了半天實在不值得，於是查詢了下，瞭解了一個概念“文檔流”，

文檔流，通常説是元素從上而下，自左向右進行排列，那麼這個元素就是節點元素，龐大的dom啊。還是先來説説其它解釋吧，我比較喜歡的是這樣來闡述：文檔+流，文檔顧名思義就是説網頁文檔，而流則是輸出方式，還有的解釋説是瀏覽器的解析方式，這個貌似更形象一點，正常的文檔流，就好像是一個平面，而一個元素你把它放在哪了，它就在哪，而浮動、固定定位和相對定位，這裏分析absolute，就是重新生成了一個流，脱離了它的父層標籤，就好像之前z-index為0，而這個的z-index就上了它的上面，憑空懸浮在它上面的，可以通過left、top來肆意的挪動它。

大概意思能夠明白了，但是感覺有些地方還是沒法有效的用語言來表述，而且有些點略微有些模糊，相信隨着經驗的累積，我能理解的更深一些。

2、keyCode這裏的大寫，onkeyup和onkeydown這裏的小寫，在這個地方也是測試了下才發現的問題，對於javascript，每個小地方都是大問題啊；

3、switch裏的break；這個java裏面就常碰到，就不多説了

大概的問題就是以上幾點，而你還記得註釋的快捷鍵麼，還記得其他快捷鍵麼，這就出現了一個問題，上面做出響應的我們只是針對單個按鍵，如果我們想用一些快捷鍵呢，該怎麼設置呢？

先來看下代碼：

ydown=function(event){//還是跟上面差不多的代碼吧，你看出不同在哪裏了麼 var event=event||t; var bctrl=Key;//在這裏 switch(ode){ case 37:toLeft=true;break; case 38:if(bctrl){ground="yellow";break;}toTop=true;break;//在這裏， case 39:toRight=true;break; case 40:toBottom=true;break; } };

這裏碰到了event對象的另一個屬性，是在keyCode之外的另一個，ctrlKey，還是大寫哦，它的主要功能是檢查ctrl按鍵的狀態，其實這樣的還有兩個：

altKey和shiftKey，分別是對alt按鍵和shift按鍵狀態的檢查，這樣知道怎麼設個快捷鍵了吧。

其實如果是我自己寫的話，可能這樣我就已經很滿足了，但是在翻閲搜索的時候，總能碰到心思縝密的朋友

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

function limit(){ var doc = [ntWidth, ntHeight] //防止左側溢出 etLeft <=0 && ( = 0); //防止頂部溢出 etTop <=0 && ( = 0); //防止右側溢出 doc[0] - etLeft - etWidth <= 0 && ( = doc[0] - etWidth + "px"); //防止底部溢出 doc[1] - etTop - etHeight <= 0 && ( = doc[1] - etHeight + "px") }

這裏我附上的是網上的代碼在實現防止溢出的同時，我還想贊一下這個寫法，比我寫的果斷的要短了許多許多，以後也要試着寫短點。