jQuery实现用方向键控制层的上下左右移动
2023-06-13 09:14:44 时间
题目:按下方向键时,使层向相应的方向平滑移动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 validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案详解编程语言
- jquery导航条的效果(css选择器控制)
- JQuery优缺点分析说明
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- 使用jQuery同时控制四张图片的伸缩实现代码
- jQuery使用一个按钮控制图片的伸缩实现思路
- jquery获取焦点和失去焦点事件代码
- jquery实现textarea输入字符控制(仿微博输入控制字符)
- 基于jquery实现控制经纬度显示地图与卫星
- jquery实现输入框动态增减的实例代码
- jQuery的控件及事件(输入控件及回车事件)使用示例
- jQuery实现密保互斥问题解决方案
- jQuery回车实现登录简单实现
- JQuery中使用Ajax赋值给全局变量异常的解决方法
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- jquery控制display属性为none或block
- jquery缓动swingliner控制动画过程不同时刻的速度
- 使用jquery+CSS实现控制打印样式
- jQuery浮动导航菜单适合购物商品类型的网站
- Jquery设置attr的disabled属性控制某行显示或者隐藏