如何使div无限运动？

提问于 2024-04-20T15:50:49+08:00

浏览次

3

我正在尝试制作一个使用移动div的网页，该div慢慢向左移动 . 还有另一个div在其上方向右移动，产生3D效果（但这不是重点） .

我现在要做的是制作一个7000px宽的div，慢慢向左移动（用jQuery animate() 动画CSS的"right"属性），但是在它全部移动后，动画结束 .

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

我认为这需要一些单独的div，每一个达到它的结束，然后返回，但我无法弄清楚如何做到这一点，因为我是一个初学者jQuery开发人员 .

3 回答

3
UPDATE

考虑到您在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动画效果，此代码中的动画持续时间更快，只是为了帮助查看效果 .

希望它能帮到你
回复于 2024-04-20T15:50:49+08:00
2

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

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

回复于 2024-04-20T15:50:49+08:00
1

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

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

回复于 2024-04-20T15:50:49+08:00

相关问题