Tympanus頁面加載效果：多頁

我想使用Tympanus的頁面加載效果（請參閱演示：http://tympanus.net/Development/PageLoadingEffects/index2.html）。Tympanus頁面加載效果：多頁

不幸的是，所有演示鏈接僅使用一個頁面切換，例如，從第1頁到第2頁。就我而言，我希望有幾個「頁面」，每個項目一個。

Tympanus的示例查找一個名爲「容器」的類，並向相應的div元素添加/移除「show」類。

<script> 
     (function() { 
      var pageWrap = document.getElementById('pagewrap'), 
       pages = [].slice.call(pageWrap.querySelectorAll('div.container')), 
       currentPage = 0, 
       triggerLoading = [].slice.call(pageWrap.querySelectorAll('a.pageload-link')), 
       loader = new SVGLoader(document.getElementById('loader'), { speedIn : 300, easingIn : mina.easeinout }); 

      function init() { 
       triggerLoading.forEach(function(trigger) { 
        trigger.addEventListener('click', function(ev) { 
         ev.preventDefault(); 
         loader.show(); 
         // after some time hide loader 
         setTimeout(function() { 
          loader.hide(); 

          classie.removeClass(pages[ currentPage ], 'show'); 
          // update.. 
          currentPage = currentPage ? 0 : 1; 
          classie.addClass(pages[ currentPage ], 'show'); 

         }, 2000); 
        }); 
       });  
      } 

      init(); 
     })(); 
    </script>

如何修改腳本以便能夠擁有多於兩個「頁面」？ PS：我寫「頁」，因爲它實際上都發生在一個單一的HTML文件。

來源

2014-05-18 Matthias Schnüriger

他們只是來回翻動頁面之間的位置：

currentPage = currentPage ? 0 : 1;

的代碼看，我相信所有你需要做的是：

currentPage = currentPage == pages.length - 1 ? 0 : currentPage + 1;

來源

2014-05-18 12:31:47

你的建議導致了一個事實，即頁（2,3,4）相繼打開。但我想專門針對它們。例如link-1打開div-1，link-2打開div-2等。 –

Tympanus頁面加載效果：多頁

回答

相關問題