jQuery实现用方向键控制层的上下左右移动


Posted in Javascript onJanuary 13, 2013

题目:按下方向键时,使层向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)和40(下)。

然后我写了下面的代码

jQuery实现用方向键控制层的上下左右移动

$div就是要移动的层,且它的position已在CSS中设为relative。瞄一眼好像没什么问题,运行之后发现下面的问题:

1.按了向下之后,再按向上没有反应。

2.按了向右之后,再按向左没有反应。

后来经一网友点拨,恍然大悟:

当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层没有向上移动是因为浏览首先解析的是top,也就是说{top:20px;bottom:100px}和{top:20px}是一样的,不管bottom值是多少。按了向右之后,按向左没有反应也是这个原因,关键在left值。

于是将代码改了下

jQuery实现用方向键控制层的上下左右移动

运行之后如预期一样,上下左右都没问题。

体会:一直都知道在定位的时候,靠top和left两个属性就足够的,偏偏还写出了right/bottom,真是细节要人命啊。

Javascript 相关文章推荐
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 #Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 #Javascript
关于全局变量和局部变量的那些事
Jan 11 #Javascript
jquery延迟加载外部js实现代码
Jan 11 #Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 #Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 #Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 #Javascript
You might like
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
股份合作协议书范本
2014/04/14 职场文书
妇女干部培训方案
2014/05/12 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Python 语言实现六大查找算法
2021/06/30 Python
Vue h函数的使用详解
2022/02/18 Vue.js
分享Python获取本机IP地址的几种方法
2022/03/17 Python