如何使div无限移动？答案

【问题标题】：How to make infinite movement of a div?如何使div无限移动？
【发布时间】：2009-06-15 22:32:59
【问题描述】：

我正在尝试制作一个使用缓慢向左移动的移动 div 的网页。还有另一个 div 在它的顶部向右移动，产生 3D 效果（但这不是重点）。

我现在要做的是制作一个 7000px 宽的 div，它慢慢地向左移动（使用 jQuery animate() 为 CSS 的“右”属性设置动画），但在它全部移动之后，动画结束。

有没有办法让 div 无限宽或至少让它回到开头（很像杂货店结帐移动皮带的东西），所以动画永远不会停止？

我认为这需要几个单独的 div，每个 div 一旦到达终点，就会返回，但我不知道如何做到这一点，因为我是一个初学者 jQuery 开发人员。

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

更新

考虑到您在http://nth.brandonwang.org/stuhf2/simpleindex.html 的示例，您可以通过在末尾添加回调来修复它，您的脚本必须是这样的：

$(document).ready(function() {
    animateRight ();
    animateLeft ();
});

function animateRight ()
{
    $('#lightright').css ("left", "100%");
    $('#lightright').animate({left:'0%'},1500, "", animateRight);
}

function animateLeft ()
{
    $('#lightleft').css ("right", "100%");
    $('#lightleft').animate({right:'0%'},1600, animateLeft);
}

基本上我们只是重置动画css属性并启动de动画效果，这段代码中动画持续时间更快只是为了帮助查看效果。

希望对你有帮助

【讨论】：

我不明白它是如何工作的；你可以在这里看到我的工作：nth.brandonwang.org/stuhf2/ 如果你等待的时间足够长，你会注意到随着 div 离开屏幕，移动消失了。
好的，我刚刚用你需要的东西做了一个全新的演示，希望对你有帮助
deltaX 和 deltaT 有什么作用？
deltaX 和 deltaY 定义滚动的速度，动画定义为“div 每隔 deltaY 毫秒将 deltaX 像素向左移动”
很抱歉再次打扰你，我知道我一定看起来非常愚蠢，但我仍然无法弄清楚如何实现这个......你能看看我的代码（链接 nth.brandonwang. org/stuhf2) 并告诉我如何实现它？非常感谢。

【解决方案2】：

您可以考虑使用 jQuery marquee 插件：

http://remysharp.com/demo/marquee.html
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

【讨论】：

【解决方案3】：

您是否尝试在页面中实现视差？有几个插件可以处理这个问题。

http://plugins.jquery.com/project/jparallax http://plugins.jquery.com/project/jquery-parallax http://en.wikipedia.org/wiki/Parallax

【讨论】：