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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
javascript表单事件处理方法详解
May 15 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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
收音机术语解释
2021/03/01 无线电
透析PHP的配置文件php.ini
2006/10/09 PHP
php连接mysql数据库代码
2009/03/10 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python插入排序算法实例分析
2015/07/03 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python3 max()函数基础用法
2019/02/19 Python
更新修改后的Python模块方法
2019/03/03 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
详解python解压压缩包的五种方法
2019/07/05 Python
基于django传递数据到后端的例子
2019/08/16 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python中altair可视化库实例用法
2021/01/26 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
食堂员工工作职责
2013/12/18 职场文书
《火烧云》教学反思
2014/04/12 职场文书
幼师求职信
2014/06/23 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
nginx共享内存的机制详解
2022/03/21 Servers