jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
題目：按下方向鍵時(shí)，使層向相應(yīng)的方向平滑移動(dòng)20像素；四個(gè)方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）。
然后我寫(xiě)了下面的代碼：
$div就是要移動(dòng)的層，且它的position已在CSS中設(shè)為relative。瞄一眼好像沒(méi)什么問(wèn)題，運(yùn)行之后發(fā)現(xiàn)下面的問(wèn)題：
1.按了向下之后，再按向上沒(méi)有反應(yīng)。
2.按了向右之后，再按向左沒(méi)有反應(yīng)。
后來(lái)經(jīng)一網(wǎng)友點(diǎn)撥，恍然大悟：
當(dāng)按了向下的時(shí)候，top值為20px，這時(shí)候再按向上，從Firebug可以看出此時(shí)的bottom值也是20px，而層沒(méi)有向上移動(dòng)是因?yàn)闉g覽首先解析的是top，也就是說(shuō){top:20px;bottom:100px}和{top:20px}是一樣的，不管bottom值是多少。按了向右之后，按向左沒(méi)有反應(yīng)也是這個(gè)原因，關(guān)鍵在left值。
于是將代碼改了下：
運(yùn)行之后如預(yù)期一樣，上下左右都沒(méi)問(wèn)題。
體會(huì)：一直都知道在定位的時(shí)候，靠top和left兩個(gè)屬性就足夠的，偏偏還寫(xiě)出了right/bottom，真是細(xì)節(jié)要人命啊。
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
- jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表示例
- jquery實(shí)現(xiàn)列表上下移動(dòng)功能
- jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
- jQuery讓控件左右移動(dòng)的三種實(shí)現(xiàn)方法
- jQuery slider Content(左右控制移動(dòng))
- jQuery實(shí)現(xiàn)下拉框左右移動(dòng)（全部移動(dòng)，已選移動(dòng)）
- 基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
- Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
相關(guān)文章
jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)
這篇文章主要介紹了jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-04-04
在一些圖片比較多的網(wǎng)站上會(huì)出現(xiàn)訪問(wèn)時(shí)圖片不存在的情況：默認(rèn)顯示出來(lái)的樣子很不雅觀,可以解決圖片不存在時(shí)，使用其他的圖片替換嗎，答案是可以的；感興趣的朋友可以了解下，或許本文可以幫助到你2013-02-02
jQuery mobile類(lèi)庫(kù)使用時(shí)加載導(dǎo)航歷史的方法簡(jiǎn)介
這篇文章主要介紹了jQuery mobile開(kāi)發(fā)中加載導(dǎo)航歷史的方法,jQuery mobile是jQuery針對(duì)移動(dòng)設(shè)備開(kāi)發(fā)的JavaScript庫(kù),需要的朋友可以參考下2015-12-12
這篇文章主要介紹了ajax的分頁(yè)查詢示例（不刷新頁(yè)面），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
本篇文章主要介紹了jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
jQuery取得元素標(biāo)簽名稱小結(jié)（附代碼）
這篇文章主要介紹了 jquery如何取得元素標(biāo)簽名稱，將html和js代碼附上，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制氣泡圖的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
快速掌握jquery分頁(yè)插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁(yè)插件jqPaginator的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery實(shí)現(xiàn)給input綁定回車(chē)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給input綁定回車(chē)事件的方法,結(jié)合實(shí)例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下2017-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單五子棋游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05