jQuery实现了通过方向键控制div块上下左右移动的方法[测试可用]

本文描述了jQuery通过方向键控制div块上下左右移动的方法。分享给大家参考，如下：

在CSS中，当DOM元素的位置属性为绝对或相对时，我们可以通过改变这个元素的左侧和顶部属性的具体值来控制元素在页面中的位置。

利用上述属性，我们可以简单地实现页面中某个元素的移动效果。这里我们用JQuery的animate方法来实现动画效果，用keydown来监控按下方向键的事件(这里用keydown代替keydown来让元素在按下方向键时一直移动，keydown是监控按下事件，keydown是监控按键释放事件)。在这里，我们还可以利用animate方法的一个特性，即当其属性的值为'='或'-='时，将根据原始值进行计算，然后分配给相应的属性，这与c的运算符是一致的。

核心代码如下：

$(文档)。keydown(函数(事件){ var keyNum=event.which//获取键值var Item=$(' # switcher ')；//要移动的元素item . CSS({ position : ' relative ' })；//设置位置开关(keyNum){ //判断key case37:项。动画({ left : '-=20px ' })；打破；案例38: item . animate({ top : '-=20px ' })；打破；案例39: item . animate({ left : '=20px ' })；打破；案例40: item . animate({ top : '=20px ' })；打破；default: break}});完整的示例代码如下：

！doctype html townleta charset=' utf-8 ' title www.jb51.net jquery controls div movement/title script src=' http:http://libs.baidu.com/jquery/2.0.0/jquery.min.js'/script/headsdydiv id=' switcher ' style=' width :200 px；高度：200 px；border:solid 1px # 000/divscript$(文档)。keydown(函数(事件){ var keyNum=event.which//获取键值var Item=$(' # switcher ')；//要移动的元素item . CSS({ position : ' relative ' })；//设置位置开关(keyNum){ //判断key case37:项。动画({ left : '-=20px ' })；打破；案例38: item . animate({ top : '-=20px ' })；打破；案例39: item . animate({ left : '=20px ' })；打破；案例40: item . animate({ top : '=20px ' })；打破；default: break}});/脚本/正文/html运行效果：

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。