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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 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 用数组降低程序的时间复杂度
2009/12/04 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
javascript 写类方式之二
2009/07/05 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JS简单计算器实例
2015/01/20 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python机器人行走步数问题的解决
2018/01/29 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
单位办理社保介绍信
2014/01/10 职场文书
大学社团计划书
2014/05/01 职场文书
2015年化验员工作总结
2015/04/10 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP