作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:13:10 阅读 我要评论

题目:按下方向键时,使层向相应的方向平滑移动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,真是细节要人命啊。

  推荐阅读

  javascript真的不难-回顾一下基础知识

前言 说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句块等等,而对于每种语言在写法上到是显得>>>详细阅读


本文标题:jQuery实现用方向键控制层的上下左右移动

地址:http://www.17bianji.com/kaifa2/JS/22528.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)