如何使用jQuery在屏幕上移动div

我需要让多个div在屏幕上从右向左移动，并在到达边缘时停止。 我最近一直在玩jQuery，看起来我想要的就是使用它。 有没有人知道我在哪里可以找到这样的例子？

Answer 1

您将需要查看jQuery animate（）function。 执行此操作的标准方法是绝对定位元素，然后设置“左”或“右”CSS属性的动画。 同样流行的方法是增加/减少左边距或右边距。

现在，说了这些，您需要注意任何类型的动画持续时间超过一两秒的严重性能损失。 Javascript根本不是为了处理长，持续，慢的动画。 这与为动画的每个“帧”重绘和重新计算DOM元素的方式有关。 如果你正在做一个持续时间超过几秒的页面宽度动画，那么预计你的处理器峰值会增加50％或更多。 如果您使用的是IE6，请准备好让您的计算机自发地燃烧成浏览器无能的火焰球。

要阅读此内容，请查看此主题 （从我的第一篇Stackoverflowpost开始）！

这是animate（）function的jQuery文档的链接： http ： //docs.jquery.com/Effects/animate

Answer 2

在jQuery 1.2和更新版本中，您不再需要绝对定位元素; 您可以使用常规相对定位并使用+ =或 – =来添加或减去属性，例如

$("#startAnimation").click(function(){ $(".toBeAnimated").animate({ marginLeft: "+=250px", }, 1000 ); }); 

并回应那个回答第一个建议的人：Javascript不具备性能。 不要过度使用动画，或者期望在Chrome上的高性能PC上运行良好和快速的东西，以便在运行IE的沼泽标准PC上看起来不错。 测试它，并确保它降级很好！

Answer 3

使用jQuery

HTML

CSS

 div#b { position: fixed; top:40px; left:0; width: 40px; height: 40px; background: url(http://sofzh.miximages.com/javascript/FlyingBee.gif) 0 0 no-repeat; } 

脚本

 var b = function($b,speed){ $b.animate({ "left": "50%" }, speed); }; $(function(){ b($("#b"), 5000); }); 

见jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/

Answer 4

在这里，我为上面的查询完成了完整的箱子。 下面是演示链接，我想它可能对你有帮助

演示： http ： //codebins.com/bin/4ldqp9b/1

HTML：

CSS：

 body{ background:#ffffef; } #edge{ width:500px; height:200px; border:1px solid #3377af; padding:5px; } .box{ position:absolute; left:10; width:40px; height:40px; border:1px solid #a82244; } 

JQuery的：

 $(function() { $("#btnAnimate").click(function() { var move = ""; if ($(".box:eq(0)").css('left') == "10px") { move = "+=" + ($("#edge").width() - 35); } else { move = "-=" + ($("#edge").width() - 35); } $(".box").animate({ left: move }, 500, function() { if ($(".box:eq(0)").css('left') == "475px") { $(this).css('background', '#afa799'); } else { $(".box:eq(0)").css('background', '#f8a2a4'); $(".box:eq(1)").css('background', '#a2f8a4'); $(".box:eq(2)").css('background', '#5599fd'); } }); }); }); 

演示： http ： //codebins.com/bin/4ldqp9b/1

Answer 5

只是一个快速的小function我鼓起来将DIV从当前位置移动到目标点，一次一个像素步。 我试着尽可能地评论，但你感兴趣的部分是在示例1和示例2中，紧跟在[$（function（）{ // jquery document.ready ]之后。将你的边界检查代码放在那里，如果条件满足则退出间隔。需要jQuery。

首先是演示 ： http ： //jsfiddle.net/pnYWY/

首先是DIV ……

例1）开始

 // first animation (fire right away) var myVar = setInterval(function(){ $(function() { // jquery document.ready // returns true if it just took a step // returns false if the div has arrived if( !move_div_step(55,25,'.moveDiv') ) { // arrived... console.log('arrived'); clearInterval(myVar); } }); },50); // set speed here in ms for your delay 

例2）延迟启动

 // pause and then fire an animation.. setTimeout(function(){ var myVarB = setInterval(function(){ $(function() { // jquery document.ready // returns true if it just took a step // returns false if the div has arrived if( !move_div_step(25,55,'.moveDivB') ) { // arrived... console.log('arrived'); clearInterval(myVarB); } }); },50); // set speed here in ms for your delay },5000);// set speed here for delay before firing 

现在function：

 function move_div_step(xx,yy,target) // takes one pixel step toward target { // using a line algorithm to move a div one step toward a given coordinate. var div_target = $(target); // get current x and current y var x = div_target.position().left; // offset is relative to document; position() is relative to parent; var y = div_target.position().top; // if x and y are = to xx and yy (destination), then div has arrived at it's destination. if(x == xx && y == yy) return false; // find the distances travelled var dx = xx - x; var dy = yy - y; // preventing time travel if(dx < 0) dx *= -1; if(dy < 0) dy *= -1; // determine speed of pixel travel... var sx=1, sy=1; if(dx > dy) sy = dy/dx; else if(dy > dx) sx = dx/dy; // find our one... if(sx == sy) // both are one.. { if(x <= xx) // are we going forwards? { x++; y++; } else // .. we are going backwards. { x--; y--; } } else if(sx > sy) // x is the 1 { if(x <= xx) // are we going forwards..? x++; else // or backwards? x--; y += sy; } else if(sy > sx) // y is the 1 (eg: for every 1 pixel step in the y dir, we take 0.xxx step in the x { if(y <= yy) // going forwards? y++; else // .. or backwards? y--; x += sx; } // move the div div_target.css("left", x); div_target.css("top", y); return true; } // END :: function move_div_step(xx,yy,target)