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


Posted in jQuery onApril 26, 2018

本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法。分享给大家供大家参考,具体如下:

在CSS中当DOM元素的position属性为absoluterelative时,我们可以通过改变这个元素的lefttop属性的具体值来控制元素在页面中显现的位置。

利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按着时,元素一直移动,keydown是监听按下事件,keyup是监听按键释放事件)。这里我们还可以利用animate方法的一个特点,就是当其属性的值为'+='或'-='之类时,它会根据原先的值先进行计算,再赋给相应的属性,这个和C++的运算符是一致的。

核心代码如下所示:

$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $('#switcher');  //要移动的元素
    Item.css({position:'relative'}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:'-=20px'});break;
    case 38: Item.animate({top:'-=20px'});break;
    case 39: Item.animate({left:'+=20px'});break;
    case 40: Item.animate({top:'+=20px'});break;
    default:
      break;
    }
});

完整示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com jQuery控制div移动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="switcher" style="width:200px;height:200px;border:solid 1px #000;">
</div>
<script>
$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $('#switcher');  //要移动的元素
    Item.css({position:'relative'}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:'-=20px'});break;
    case 38: Item.animate({top:'-=20px'});break;
    case 39: Item.animate({left:'+=20px'});break;
    case 40: Item.animate({top:'+=20px'});break;
    default:
      break;
    }
});
</script>
</body>
</html>

运行效果:

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

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

jQuery 相关文章推荐
jquery仿京东商品放大浏览页面
Jun 06 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python中bisect的用法及示例详解
2020/07/20 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
什么是数组名
2012/05/10 面试题
new修饰符是起什么作用
2015/06/28 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
全神贯注教学反思
2014/02/03 职场文书
教师开学感言
2014/02/14 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
python实现简单反弹球游戏
2021/04/12 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python