- 相關(guān)推薦
js鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
js鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
昨天記錄了獲取鍵盤(pán)按鍵的值的事件，有了值，無(wú)非就是針對(duì)不同值做不同的操作嘛，而且之前曾經(jīng)在寫(xiě)貪吃蛇時(shí)也用到過(guò)。這樣我們先來(lái)分析，要實(shí)現(xiàn)鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)大概的原理吧：
1、要實(shí)現(xiàn)div的移動(dòng)，首先最關(guān)鍵的一點(diǎn)：獲取div對(duì)象
2、postion：absolute將div完全從文檔流中拖出啊，這個(gè)地方漏掉了，回去看了貪吃蛇才發(fā)現(xiàn)的，真暈
3、獲取鍵盤(pán)的操作
4、根據(jù)鍵盤(pán)的不同操作，給出不同響應(yīng)
這就是我想起的大概需要注意的地方，還是先來(lái)看代碼：
先是html部分
然后記錄下javascript的實(shí)際操作
ad=function(){ var obj=lementById("showZone");//獲取到對(duì)象了吧，這最簡(jiǎn)單 var a=10; var toLeft=toRight=toTop=toBottom=false;//定義幾個(gè)boolean型變量，是為了后面方向操作用的，看是四個(gè)方向吧 var move=setInterval(function(){//這個(gè)地方的move定義實(shí)際上毫無(wú)意義，只是為了讓這個(gè)方法更明顯一點(diǎn) if(toLeft){ =parseInt(etLeft-a)+"px";//感覺(jué)最好還是寫(xiě)上parseInt，另外，因?yàn)閛ffsetLeft是不含px的，所以不要忘記“px” } if(toRight){ =etLeft+a+"px";//不寫(xiě)parseInt也可以，難道是因?yàn)閖avascript的執(zhí)行順序？執(zhí)行+，再執(zhí)行+，再執(zhí)行=？實(shí)現(xiàn)結(jié)果來(lái)看是 } if(toTop){ =etTop-a+"px"; } if(toBottom){ =etTop+a+"px"; } },300); //這個(gè)經(jīng)典的定時(shí)器啊，循環(huán)執(zhí)行的大神器，還記得setInterval和settimeout的區(qū)別么 ydown=function(event){ var event=event||t; switch(ode){ //哈哈，獲取到鍵盤(pán)操作了吧 case 37:toLeft=true;break;//改變變量，繼續(xù)執(zhí)行最初的循環(huán)，不讓你停不能停啊 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;//給我變回來(lái)，讓你停就別動(dòng)了 case 38:toTop=false;break; case 39:toRight=false;break; case 40:toBottom=false;break; } }; };
就這樣，我們完成了原理分析中的需求，同時(shí)也就可以通過(guò)上、下、左、右按鍵來(lái)實(shí)現(xiàn)div的上下左右移動(dòng)了，接下來(lái)，再來(lái)記錄下敏感地方吧。
1、div需是absolute的，為這個(gè)糾結(jié)了半天實(shí)在不值得，于是查詢(xún)了下，了解了一個(gè)概念“文檔流”，文檔流，通常說(shuō)是元素從上而下，自左向右進(jìn)行排列，那么這個(gè)元素就是節(jié)點(diǎn)元素，龐大的dom啊。還是先來(lái)說(shuō)說(shuō)其它解釋吧，我比較喜歡的是這樣來(lái)闡述：文檔+流，文檔顧名思義就是說(shuō)網(wǎng)頁(yè)文檔，而流則是輸出方式，還有的解釋說(shuō)是瀏覽器的解析方式，這個(gè)貌似更形象一點(diǎn)，正常的文檔流，就好像是一個(gè)平面，而一個(gè)元素你把它放在哪了，它就在哪，而浮動(dòng)、固定定位和相對(duì)定位，這里分析absolute，就是重新生成了一個(gè)流，脫離了它的父層標(biāo)簽，就好像之前z-index為0，而這個(gè)的z-index就上了它的上面，憑空懸浮在它上面的，可以通過(guò)left、top來(lái)肆意的挪動(dòng)它。
大概意思能夠明白了，但是感覺(jué)有些地方還是沒(méi)法有效的用語(yǔ)言來(lái)表述，而且有些點(diǎn)略微有些模糊，相信隨著經(jīng)驗(yàn)的累積，我能理解的更深一些。
2、keyCode這里的大寫(xiě)，onkeyup和onkeydown這里的小寫(xiě)，在這個(gè)地方也是測(cè)試了下才發(fā)現(xiàn)的問(wèn)題，對(duì)于javascript，每個(gè)小地方都是大問(wèn)題啊；
3、switch里的break；這個(gè)java里面就常碰到，就不多說(shuō)了
大概的問(wèn)題就是以上幾點(diǎn)，而你還記得注釋的快捷鍵么，還記得其他快捷鍵么，這就出現(xiàn)了一個(gè)問(wèn)題，上面做出響應(yīng)的我們只是針對(duì)單個(gè)按鍵，如果我們想用一些快捷鍵呢，該怎么設(shè)置呢？
先來(lái)看下代碼：
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對(duì)象的另一個(gè)屬性，是在keyCode之外的另一個(gè)，ctrlKey，還是大寫(xiě)哦，它的主要功能是檢查ctrl按鍵的狀態(tài)，其實(shí)這樣的還有兩個(gè)：
altKey和shiftKey，分別是對(duì)alt按鍵和shift按鍵狀態(tài)的檢查，這樣知道怎么設(shè)個(gè)快捷鍵了吧。
其實(shí)如果是我自己寫(xiě)的話(huà)，可能這樣我就已經(jīng)很滿(mǎn)足了，但是在翻閱搜索的時(shí)候，總能碰到心思縝密的朋友
附上代碼，你知道是要做什么么：
function limit(){ var doc = [ntWidth, ntHeight] //防止左側(cè)溢出 etLeft <=0 && ( = 0); //防止頂部溢出 etTop <=0 && ( = 0); //防止右側(cè)溢出 doc[0] - etLeft - etWidth <= 0 && ( = doc[0] - etWidth + "px"); //防止底部溢出 doc[1] - etTop - etHeight <= 0 && ( = doc[1] - etHeight + "px") }
這里我附上的是網(wǎng)上的代碼在實(shí)現(xiàn)防止溢出的同時(shí)，我還想贊一下這個(gè)寫(xiě)法，比我寫(xiě)的果斷的要短了許多許多，以后也要試著寫(xiě)短點(diǎn)。
【js鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼】相關(guān)文章：
淺談js的異步執(zhí)行的作用08-11
鼠標(biāo)，鍵盤(pán)作文12-03
鍵盤(pán)與鼠標(biāo)作文10-19
鼠標(biāo)與鍵盤(pán)的選擇05-18
鼠標(biāo)與鍵盤(pán)的對(duì)話(huà)作文07-16
如何正確使用鍵盤(pán)05-19
當(dāng)筆桿遇上鍵盤(pán)作文07-24
為什么鍵盤(pán)按鍵錯(cuò)亂05-30