Question

我发布了另一个关于我想要使用的另一个脚本而不是这个脚本的问题，但是没有人能够提供帮助，所以我决定尝试让这个按照我喜欢的方式工作。我已经阅读了一些与此主题相关的其他问题，但我无法弄清楚如何将这些解决方案应用于我正在使用的脚本。

我想在几秒钟之后保持气泡加速并在屏幕顶部聚集在一起。我已经能够通过调整rand和horiSpeed来减慢气泡的初始速度，但它并没有修复随后的加速或结块。

我也玩过SetInterval，但也没有运气。如果有人能指出我正确的方向，并解释不同的功能正在做什么，我将不胜感激。我对以下部分中的15和250特别感到困惑：

 marginLeft: function (n, v) {
                return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
            }
        });
    }, 15);

    setInterval(function () {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);

脚本如下，这是我的小提琴：http://jsfiddle.net/N63Tf/5/

       jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) {

    this.css('float', 'left');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1 / horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * (index * 10000),            
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setInterval(function () {
        current.css({
            marginTop: function (n, v) {
                return parseFloat(v) - vertSpeed;
            },
            marginLeft: function (n, v) {
                return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
            }
        });
    }, 15);

    setInterval(function () {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);


};
var message = 1;
$('.message').each(function (message) {
    $(this).verticalMarquee(1, 1, message);
    message++;
});

提前致谢。

编辑：关于安东回答中的功能的问题。 （评论太长，不知道还能把它放在哪里。）

当你提到在一个循环中完成所有动画时，你的意思是这个脚本可以改进吗，或者如果我想添加更多过渡，我应该将它们保存在这个脚本的函数中吗？

如果后者是真的，代码中的新转换会去哪里？我会创建另一个函数并将其放在animationStep之后吗？

该功能的计数器部分是否有自己的？（在我看来，只有一个计数器，否则每个转换都会产生单独的气泡？）

在柜台中，我是否更正，这部分正在检查#parent的界限，以便气泡保持在div内，并在每10次气泡后这样做？

  if(check && item.y < -item.elementHeight){ //check bounds every 10th iteration

最后，这是做什么的？是调用整个函数还是设置间隔时间？这是我可以加快气泡产生速度的地方吗？

 window.requestAnimationFrame = (function(){
     return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
         window.setTimeout(callback, 1000 / 60);
      };
   })();

再次感谢您的帮助！

Answer 1

随机行为来自使用浮动div。浏览器尝试将它们布局并失败，因为您不断更改边距。

第一个循环间隔15毫秒移动项目，第二个循环检查它是否到达页面顶部。

我根据其索引为每个项目添加了一些延迟（稍微超时），以防止它们聚集起来。

动画制作的一些常规提示：

尝试在一个循环中完成所有动画（因此您没有多个间隔在运行）
使用60fps
为了获得更高的性能，您还可以为css translate而不是边距设置动画。

我添加了一点延迟以防止物品混乱。这是你的工作：

    jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) {

    this.css('position', 'absolute');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1 / horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        delay= (Math.random()/2+0.5)*3000*index,
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * (index * 10000),
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setTimeout(function(){

        setInterval(function () {
            current.css({
                marginTop: function (n, v) {
                    return parseFloat(v) - vertSpeed;
                },
                marginLeft: function (n, v) {
                    return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
                }
            });
        }, 15);

        setInterval(function () {
            if (parseFloat(current.css('margin-top')) < -thisH) {
                current.css('margin-top', windowH + thisH);
            }
        }, 250);
    }, delay);

    };

    $('.message').each(function (index) {
        $(this).verticalMarquee(1, 1, index);
    });

http://jsfiddle.net/QqMu4/

这就是我所说的所有内容的外观：

http://jsfiddle.net/Arimano/549Pa/

调整速度＆amp; jQuery动画气泡的位置

1 个答案: