题目:按下方向键时,使层向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)和40(下)。
然后我写了下面的代码:
$div就是要移动的层,且它的position已在CSS中设为relative。瞄一眼好像没什么问题,运行之后发现下面的问题:
1.按了向下之后,再按向上没有反应。
2.按了向右之后,再按向左没有反应。
后来经一网友点拨,恍然大悟:
当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层没有向上移动是因为浏览首先解析的是top,也就是说{top:20px;bottom:100px}和{top:20px}是一样的,不管bottom值是多少。按了向右之后,按向左没有反应也是这个原因,关键在left值。
于是将代码改了下:
运行之后如预期一样,上下左右都没问题。
体会:一直都知道在定位的时候,靠top和left两个属性就足够的,偏偏还写出了right/bottom,真是细节要人命啊。
相关推荐
方向键控制焦点,方向键控制焦点,方向键控制焦点, 方向键控制焦点
jQuery方向键控制翻页插件是一款可用方向键控制翻页的数字分页插件jquery.keyboard-pagination。
本文将会使用jquery实现以下功能:按下方向键时,使层向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)和40(下),感兴趣的朋友可以了解下
主要介绍了jQuery实现通过方向键控制div块上下左右移动的方法,涉及jQuery结合键盘事件响应动态修改页面元素属性相关操作技巧,需要的朋友可以参考下
jquery实现的支持键盘方向按键和鼠标拖动切换的全屏相册/文字广告特效源码,是一段实现了可以使用键盘上下左右方向按键控制切换的效果代码,同时此段代码也支持鼠标拖动切换画面,本段代码适用于所有网页使用,有...
Jquery定时器及键盘控制网页对象移动代码
MobileGraph-Jquery:带移动jQuery的移动图
注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了
jQuery穿梭框列表按钮控制左右移动代码,点击控制按钮,左右列表内容可互相转移。
jQuery实现平面图区域标记拖拽移动效果
一个代替笔记本触摸板的小程序 可以用键盘上下左右键控制鼠标移动 绝对原创
鼠标移上某一位置,随即在鼠标附近弹出层,鼠标移动则层移动
一个用回车键移动焦点的 jQuery 插件。可以前后移动,表单元素可以分组移动。介绍这个 jQuery 插件提供 UI,使用 ENTER 键移动焦点 HTML 元素,而不仅仅是 TAB 键。这个 jQuery 插件提供了一个用户界面,可以使用 ...
jquery实现的支持键盘方向按键和鼠标拖动切换的全屏相册文字广告特效源码.zip
jquery可自定义可移动悬浮键盘 结构不改动的情况下,按键内容、键盘外观样式都可修改,代码简单易懂。
jQuery移动Web开发(第二版)源代码