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