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 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
Oct 10 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
Jquery性能优化详解
2014/05/15 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
详解python读取image
2019/04/03 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python实现126邮箱发送邮件
2020/05/20 Python
python如何处理程序无法打开
2020/06/16 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
最美家庭活动方案
2014/08/31 职场文书
初中学习计划书范文
2014/09/15 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年教研员工作总结
2015/05/26 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android