jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
时间:2019-04-14
本文章向大家介绍jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】,主要包括jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法。分享给大家供大家参考,具体如下:
在CSS中当DOM元素的position
属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置。
利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用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>www.jb51.net 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相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- 解决WordPress缩略图插件timthumb不支持站外图片的问题
- 让 http 2来得更猛烈些吧
- SQL Server 2008基于策略的管理
- centos系统安装Python
- rpc框架之 thrift连接池实现
- .NET Core全新路线图
- jboss eap 6.2+ 版本中 加密datasource密码等敏感信息
- WordPress自定义栏目运用实例II:添加文章Meta标签(keywords /description)
- 《Deep Learning with Python》第一章 1.1 人工智能、机器学习和深度学习
- boost::function的用法
- rpc框架之 thrift 学习 1 - 安装 及 hello world
- WordPress自定义栏目运用实例Ⅰ:添加文章来源
- ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表
- 算法:支持重复元素的二分查找
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Studio 利用Splash制作APP启动界面的方法
- android surfaceView实现播放视频功能
- Android Studio中一套代码多渠道打包的实现方法
- Android自定义View实现圆环进度条
- Android启动页用户相关政策弹框的实现代码
- 10个好用的 HTML5 特性
- Android实现签名涂鸦手写板
- Android 开发使用Activity实现加载等待界面功能示例
- 详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
- Android开发自定义控件之折线图实现方法详解
- Android Studio实现长方体表面积计算器
- android studio实现简单的计算器功能
- Android小程序实现个人信息管理系统
- Flutter 使用Navigator进行局部跳转页面的方法
- Android小程序实现简易QQ界面