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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现全选按钮
Jan 01 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jquery插件实现代码雨特效
Apr 24 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP 开源AJAX框架14种
2009/08/24 PHP
解析php5配置使用pdo
2013/07/03 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
决策树的python实现方法
2014/11/18 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
pycharm 安装JPype的教程
2019/08/08 Python
python创建学生管理系统
2019/11/22 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
会计专业推荐信
2013/10/29 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
企业计划生育责任书
2015/05/09 职场文书
蜗居观后感
2015/06/11 职场文书
人民的好儿女观后感
2015/06/18 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
工商局调档介绍信
2015/10/22 职场文书
公司晚会主持词
2019/04/17 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL