Tympanus页面加载效果:多页面
Tympanus页面加载效果:多页面
提问于 2014-05-18 19:49:30
我想使用Tympanus的页面加载效果(参见演示：http://tympanus.net/Development/PageLoadingEffects/index2.html)。
不幸的是，所有的演示链接只使用一个页面切换，例如从页面1到页面2。在我的例子中，我希望有几个“页面”，每个项目一个页面。
Tympanus的示例查找名为"container“的类，并向相应的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文件中。
Stack Overflow用户
发布于 2014-05-18 20:31:48
它们只是在这里的页面之间来回切换：
currentPage = currentPage ? 0 : 1;看一下代码，我相信你需要做的就是：
currentPage = currentPage == pages.length - 1 ? 0 : currentPage + 1; 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23721557
复制相关文章
相似问题
腾讯云开发者
