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版仿Path菜单效果
Dec 15 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
小程序实现上传视频功能
Aug 18 Javascript
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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python学习思维导图(必看篇)
2017/06/26 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
PyTorch预训练的实现
2019/09/18 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python实现京东抢秒杀功能
2021/01/25 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
物流管理专业毕业生自荐信
2014/03/04 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
2015年招聘工作总结
2014/12/12 职场文书
生日答谢词
2015/01/05 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
Django框架中模型的用法
2022/06/10 Python