Question

我想使用Tympanus的页面加载效果（请参阅演示：http://tympanus.net/Development/PageLoadingEffects/index2.html）。

不幸的是，所有演示链接仅使用一个页面切换，例如从第1页到第2页。就我而言，我希望有几个“页面”，每个项目一个。

Tympanus'示例查找名为“container”的类，并将“show”类添加/删除到相应的div元素。

<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文件中。

Answer 1

他们只是在页面之间来回翻转：

  currentPage = currentPage ? 0 : 1;

查看代码，我相信您需要做的就是：

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

鼓室页面加载效果：多页

1 个答案: