製作手機相簿 全屏滾動外掛程式fullpage.js

標籤：

今天是端午自己做了一個小的送祝福連結 

 這裡用到了fullpage外掛程式

$(‘#container‘).fullpage({
　　navigation: false,        //navigation是否顯示導航，預設為false

　　easing: ‘easeInQuart‘,

　　scrollingSpeed: 400,
　　loopBottom: false,
　　loopTop: false,
　　afterLoad: function(anchorLink, index) {//最後一頁不顯示向上滑動 此處index設定從1開始的
　　　　if(index == page_num){
　　　　$(‘.slide_up_tip‘).hide();
　　}else{
　　　　$(‘.slide_up_tip‘).show();
　　}

　　onLeave: function(index, nextIndex, direction) {//當頁面過長導致安卓卡頓,使用下面的方法,需要在onload後顯示前兩頁

　　　　var index = index - 1; 　　　　　　　　　　　　//讓index和jquery eq一樣從0開始,省的看著心煩
　　　　if(direction == ‘down‘){　　　　　　　　　　//index大於第2頁執行
　　　　　　if(index >= 1) $(‘.fp-section:eq(‘+(index-1)+‘)‘).css(‘visibility‘, ‘hidden‘);

　　　　　　　　　　　　　　　　　　　　　　　　//index小於倒數第2執行
　　　　　　if(index <= page_num - 2) $(‘.fp-section:eq(‘+(index+2)+‘)‘).css(‘visibility‘, ‘visible‘);
　　　　}else{　　　　　　　　　　　　　　　//index小於倒數第2執行
　　　　　　if(index <= page_num - 2) $(‘.fp-section:eq(‘+(index+1)+‘)‘).css(‘visibility‘, ‘hidden‘);
　　　　　　　　　　　　　　　　　　　　　　//index大於第2頁執行
　　　　　　if(index >= 1) $(‘.fp-section:eq(‘+(index-2)+‘)‘).css(‘visibility‘, ‘visible‘);　　
　　　　}
　　}
})

 

官方地址：https://github.com/alvarotrigo/fullPage.js

　　

製作手機相簿 全屏滾動外掛程式fullpage.js