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使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python实现Adapter模式实例代码
2018/02/09 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
使用npy转image图像并保存的实例
2020/07/01 Python
python代码实现图书管理系统
2020/11/30 Python
音乐学个人的自荐书范文
2013/11/26 职场文书
大学军训感言400字
2014/03/11 职场文书
安全责任协议书
2014/04/21 职场文书
机关搬迁方案
2014/05/18 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014年网管工作总结
2014/12/11 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
mysql主从复制的实现步骤
2021/10/24 MySQL