如何使用jquery或css轻松创建移动粒子动画

时间:2016-03-25 07:42:13

标签: jquery animation scroll

我有一个横幅,其中我使用jquery.bgscroll.js使用以下代码水平移动粒子。

(function() {
jQuery.fn.bgscroll = jQuery.fn.bgScroll = function( options ) {

    if( !this.length ) return this;
    if( !options ) options = {};
    if( !window.scrollElements ) window.scrollElements = {};

    for( var i = 0; i < this.length; i++ ) {

        var allowedChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var randomId = '';
        for( var l = 0; l < 5; l++ ) randomId += allowedChars.charAt( Math.floor( Math.random() * allowedChars.length ) );

            this[ i ].current = 0;
            this[ i ].scrollSpeed = options.scrollSpeed ? options.scrollSpeed : 70;
            this[ i ].direction = options.direction ? options.direction : 'h';
            window.scrollElements[ randomId ] = this[ i ];

            eval( 'window[randomId]=function(){var axis=0;var e=window.scrollElements.' + randomId + ';e.current -= 1;if (e.direction == "h") axis = e.current + "px 0";else if (e.direction == "v") axis = "0 " + e.current + "px";else if (e.direction == "d") axis = e.current + "px " + e.current + "px";jQuery( e ).css("background-position", axis);}' );

            setInterval( 'window.' + randomId + '()', options.scrollSpeed ? options.scrollSpeed : 70 );
        }

        return this;
    };
  })(jQuery);

用法:jQuery(&#39; .particles&#39;)。bgscroll({scrollSpeed:90,方向:&#39; h&#39;});

这是我需要的,但经过一段时间,比如15分钟,我的页面崩溃,因为这个而被抛弃。

有没有简单的方法来创建这个相同的移动动画而没有页面崩溃的结果?

提前致谢。

1 个答案:

答案 0 :(得分:0)

一般来说,崩溃是由递归引起的。尝试替换

jQuery.fn.bgscroll = jQuery.fn.bgScroll = function( options )

jQuery.fn.bgScroll = function( options )