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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

  • jquery使用animate方法实现控制元素移动

    本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume

  • 移动端jQuery修正Web页面滑动时div问题的两则实例

    移动端jQuery修正Web页面滑动时div问题的两则实例

    顶部固定时划屏出现闪动 头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动.出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验. 解决方法一: 之前的做法: if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); }else{ $(&qu

  • jQuery实现用方向键控制层的上下左右移动

    jQuery实现用方向键控制层的上下左右移动

    题目:按下方向键时,使层向相应的方向平滑移动20像素:四个方向键的键码分别是37(左).38(上).39(右)和40(下). 然后我写了下面的代码: $div就是要移动的层,且它的position已在CSS中设为relative.瞄一眼好像没什么问题,运行之后发现下面的问题: 1.按了向下之后,再按向上没有反应. 2.按了向右之后,再按向左没有反应. 后来经一网友点拨,恍然大悟: 当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层

  • 基于jquery的用鼠标画出可移动的div

    基于jquery的用鼠标画出可移动的div

    具体的原理我就不多说了,直接贴代码. html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • jQuery实现div跟随鼠标移动

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解释) <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.

  • jQuery拖动div、移动div、弹出层实现原理及示例

    代码演示: http://www.imqing.com/demo/movediv.html 大概原理: 使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup. 在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置.即: left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) to

  • jQuery实现按键盘方向键翻页特效

    1.jQuery代码: 复制代码 代码如下: $(document).ready(function(){     var prevpage=$("#pre").attr("href");     var nextpage=$("#next").attr("href");     $("body").keydown(function(event){       if(event.keyCode==37 &am

  • Jquery实现Div上下移动示例

    复制代码 代码如下: $(this).ready(function() { $(".up").each(function() { $(this).click(function() { var $tr = $(this).parents("li"); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); var trLength = $(".down").length; $("

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

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

    本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法.分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按

  • Jquery实现移动端控制DIV拖拽

    Jquery实现移动端控制DIV拖拽

    本文实例为大家分享了Jquery实现移动端控制DIV拖拽的具体代码,供大家参考,具体内容如下 需求:车型配置表,移动端需要滑动,并且多项配置的表需要联动对应头部分类名称 要求:左侧 title 固定 / 顶部需要吸顶效果 处理方案:一开始打算使用table表格,但是发现不太好控制,后来就使用了div进行模拟了table表格.左侧title 和 右侧的表格属于两部分结构. 然后移动端的时候进行相对定位,控制右侧的盒子进行联动并且实现滑动效果 /*     touchstart 事件     tou

  • js控制div弹出层实现方法

    本文实例讲述了js控制div弹出层实现方法.分享给大家供大家参考.具体分析如下: 这是个功能很好,且容易调用和控制的弹出层.感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title&g

  • js控制div层的叠加简单方法

    js控制div层的叠加简单方法

    如下所示: <style type="text/css"> .favorite_icon{float:left; padding: 0 0 0 30px;} .favorite_label{float:left; width:950px;} .favorite_label h2{ border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;} .favorite_title{height:60px;margi

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • jQuery控制Div拖拽效果完整实例分析

    本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • Javascript控制div属性动态变化实例分析

    Javascript控制div属性动态变化实例分析

    本文实例分析了Javascript控制div属性动态变化的方法.分享给大家供大家参考.具体如下: 这里使用JS控制div属性变化,另Div的几何尺寸发生变化,例如变宽.变高.改变颜色.隐藏Div.重置所有属性为默认值等.虽然在本例中,这些属性值的改变很简单就可实现,但在JavaScript网页前端设计中,这种属性或方法经常会被用到,因此还是值得大家关注的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cha-div-opt-demo/

  • js实现上下左右键盘控制div移动

    js实现上下左右键盘控制div移动

    本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下 描述: div通过键盘事件上下左右实现div块的移动 效果:  实现: js: var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删

  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    本文实例讲述了JQuery控制div外点击隐藏而div内点击不会隐藏的方法.分享给大家供大家参考.具体如下: 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: 复制代码 代码如下: $("#body").click(function(e) {      $(this).show();          e.stopPropagation();  });  $(document).click(function(event) {   

随机推荐