在動畫中限制屏幕上的元素

Question

我有一個腳本，從右向左滑動元素。 但我遇到了一個問題如何限制元素的數量在屏幕上。 現在，Array中的所有元素都被附加到DOM。但是如何拆分數組只有6個元素會滑動，而另一個稍後會被追加。

爲了說明這一點，我做了一個的jsfiddle

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

JS代碼

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 ]