jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
更新時(shí)間：2013年01月13日 13:40:15 作者：
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí)，使層向相應(yīng)的方向平滑移動(dòng)20像素；四個(gè)方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）,感興趣的朋友可以了解下
題目：按下方向鍵時(shí)，使層向相應(yīng)的方向平滑移動(dòng)20像素；四個(gè)方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）。
然后我寫了下面的代碼：
$div就是要移動(dòng)的層，且它的position已在CSS中設(shè)為relative。瞄一眼好像沒什么問題，運(yùn)行之后發(fā)現(xiàn)下面的問題：
1.按了向下之后，再按向上沒有反應(yīng)。
2.按了向右之后，再按向左沒有反應(yīng)。
后來經(jīng)一網(wǎng)友點(diǎn)撥，恍然大悟：
當(dāng)按了向下的時(shí)候，top值為20px，這時(shí)候再按向上，從Firebug可以看出此時(shí)的bottom值也是20px，而層沒有向上移動(dòng)是因?yàn)闉g覽首先解析的是top，也就是說{top:20px;bottom:100px}和{top:20px}是一樣的，不管bottom值是多少。按了向右之后，按向左沒有反應(yīng)也是這個(gè)原因，關(guān)鍵在left值。
于是將代碼改了下：
運(yùn)行之后如預(yù)期一樣，上下左右都沒問題。
體會(huì)：一直都知道在定位的時(shí)候，靠top和left兩個(gè)屬性就足夠的，偏偏還寫出了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)文章
這篇文章主要為大家詳細(xì)介紹了jQuery事件對(duì)象的屬性和方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
jquery中快速取值的方法有很多，在本文為大家介紹下通過name實(shí)現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了jQuery如何計(jì)算iframe窗口大小,需要的朋友可以參考下2014-05-05
本文主要介紹了jQuery中的ajaxSubmit方法的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)
下面小編就為大家?guī)硪黄猨query獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了greybox——不開新窗口看新的網(wǎng)頁2007-02-02
推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)
在下面的集合中，你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性2012-09-09
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取多選框的值,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁面元素屬性獲取相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確
這篇文章主要介紹了關(guān)于利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確的相關(guān)資料，文中給出了完整的示例代碼，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
table在使用中比較廣泛，下面與大家分享下JQuery操作/獲取table的基本方法，感興趣的朋友可以參考下哈2013-06-06