动画

Question

我有一个脚本可以从右到左随机滑动元素。 但我遇到了如何在屏幕上限制元素数量的问题。 现在，所有Array in Array都附加到DOM。但是如何拆分数组只有6个元素将会滑动，而另一个元素将在后面附加。

为了说明这一点，我做了一个jsfiddle

https://jsfiddle.net/magic77/fwfv0kon/6/

Js Code

var getTemplate = function (id) {
            return '<a href="#" target="_blank" class="feed-post" id="feed_' + id + '" style="transform: translate3d(-500px, 0, 0) scale(1);">' +
                '<div class="feed-post-wrap">' +
                '<div class="feed-post-image" style="background-image: url(\'assets/images/8/artists-testbild-7aed80e8.jpg\');"></div>' +
                '</div>' +
                '</a>';
        };

        var $stagetview = $('.socialfeeds'),
            elements = [];

        for (var i = 0; i < 10; i++) {
            // Append all Elements to DOM
            $stagetview.append(getTemplate(i));

            // Push Elements to Array
            elements[i] = $('#feed_' + i + '');
        }

        var animationInterval = setInterval(function () {
            if (elements.length > 0) {
                var firstElement = elements.shift();
                firstElement.testplug2({
                    y: fnc.randInt(0, 150),
                    speed: fnc.randInt(30, 120),
                    scale: fnc.randFloat(0.4, 1.01)
                });
            } else {
                clearInterval(animationInterval);
            }
        }, 1500);

    };


    $.fn.testplug2 = function (options) {

        // default settings
        var settings = $.extend({
            element: this,
            x: 0,
            y: 0,
            height: 350,
            width: 350,
            startX: 1400,
            scale: 1.0,
            speed: 100
        }, options);

        var OBJ = OBJ || {},
            _this = this,
            // static width is needed for a proper calculation
            // in this case its 350px div width + margin: 20px;
            staticwidth = 390;

        var addListeners = function () {
            // delayed stage recalculation on resize
            var delayCalc = fnc.debounce(function () {
                calculateObjStart();
            }, 150);
            $(window).on('resize', delayCalc);

            // Pause/Resume on Hover
            settings.element.hover(
                function () {
                    _this.pause();
                }, function () {
                    _this.play();
                }
            );
        };

        var init = function () {
            // Update start X based on screen size
            calculateObjStart();
            settings.x = settings.startX;
            settings.y = fnc.randInt(1, (500 - (staticwidth * settings.scale + 10)));
            //settings.y = Math.floor(Math.random() * (170 - 1 + 1)) + 1;
            settings.width = staticwidth * settings.scale;
        };

        var moveObject = function () {
            // Move Object's x position
            var velocity = settings.speed * OBJ._delta;
            settings.x = settings.x - velocity;

            // Reset when off screen
            if (settings.x < -settings.width - 20) {
                settings.x = settings.startX;
                settings.scale = fnc.randFloat(0.3, 1.05);
                settings.speed = fnc.randInt(30, 150);
                settings.y = fnc.randInt(1, (500 - (staticwidth * settings.scale + 10)));
                //settings.y = Math.floor(Math.random() * (170 - 1 + 1)) + 1;
                settings.width = staticwidth * settings.scale;
            }
        };

        var calculateObjStart = function () {
            settings.startX = document.body.clientWidth;
        };

        var frame = function () {
            OBJ.now = Date.now();
            OBJ._delta = (OBJ.now - OBJ._then) / 1000; // Converts to seconds
            OBJ._then = OBJ.now;

            // Update Object Position
            moveObject();

            // Move Element
            settings.element.css('transform', 'translate3d(' + settings.x + 'px, ' + settings.y + 'px, 0) scale(' + settings.scale + ')');
            OBJ.rafid = requestAnimationFrame(frame);
        };

        // Public Function
        this.play = function () {
            if (!OBJ.isRunning) {
                OBJ._then = Date.now();
                frame();
                OBJ.isRunning = true;
            }
            return this;
        };

        // Public Function
        this.pause = function () {
            cancelAnimationFrame(OBJ.rafid);
            OBJ.isRunning = false;
            return this;
        };

        init();
        addListeners();
        this.play();
    };


    var fnc = {
        debounce: function (func, wait, immediate) {
            var timeout;
            return function () {
                var context = this,
                    args = arguments;
                var later = function () {
                    timeout = null;
                    if (!immediate) {
                        func.apply(context, args);
                    }
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) {
                    func.apply(context, args);
                }
            };
        },
        randInt: function (min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        randFloat: function (min, max) {
            return (Math.random() * (max - min) + min).toFixed(4);
        }
    }

Answer 1

您可以使用array.splice拆分数组。希望你会发现它有用。

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

while (a.length) {
 console.log(a.splice(0, 6));
}
// [ 1, 2, 3, 4, 5, 6 ]
// [ 7, 8, 9, 10, 11, 12 ]