轉 整屏滾動效果插件 fullpage詳解

一、引用文件

[html] view plaincopyprint?

1. <link rel="stylesheet" href="css/jquery.fullPage.css">  

2. <script src="js/jquery.min.js"></script>  

3. <script src="js/jquery-ui.min.js"></script>  

4. <script src="js/jquery.fullPage.js"></script>  

二、html部分

[html] view plaincopyprint?

1. <div class="section">第一屏</div>  

2. <div class="section">第二屏</div>  

3. <div class="section">  

4.     <div class="slide">第三屏的第一屏</div>  

5.     <div class="slide">第三屏的第二屏</div>  

6.     <div class="slide">第三屏的第三屏</div>  

7.     <div class="slide">第三屏的第四屏</div>  

8. </div>  

9. <div class="section">第四屏</div>  

三、使用方法

[javascript] view plaincopyprint?

1. $(document).ready(function() {  

2.     $.fn.fullpage({  

3.         slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],  

4.         anchors: ['page1', 'page2', 'page3', 'page4']  

5.     });  

6. });  

四、詳細options參數

參數	類型	說明	默認值
verticalCentered	字符串	內容是否垂直居中	true
resize	布爾值	字體是否隨着窗口縮放而縮放	false
slidesColor	函數	設置背景顏色，如：	無
anchors	數組	定義錨連接	無
scrollingSpeed	整數	滾動速度，單位爲毫秒	700
easing	字符串	滾動動畫方式	easeInQuart
menu	布爾值	綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單能夠控制滾動	false
navigation	布爾值	是否顯示項目導航	false
navigationPosition	字符串	項目導航的位置，可選 left 或 right	right
navigationColor	字符串	項目導航的顏色	#000
navigationTooltips	數組	項目導航的 tip	無
slidesNavigation	布爾值	是否顯示左右滑塊的項目導航	false
slidesNavPosition	字符串	左右滑塊的項目導航的位置，可選 top 或 bottom	bottom
controlArrowColor	字符串	左右滑塊的箭頭的背景顏色	#fff
loopBottom	布爾值	滾動到最底部後是否滾回頂部	false
loopTop	布爾值	滾動到最頂部後是否滾底部	false
loopHorizontal	布爾值	左右滑塊是否循環滑動	true
autoScrolling	布爾值	是否使用插件的滾動方式，若是選擇 false，則會出現瀏覽器自帶的滾動條	true
scrollOverflow	布爾值	內容超過滿屏後是否顯示滾動條	false
css3	布爾值	是否使用 JavaScript 或 CSS3 transforms 滾動	false
paddingTop	字符串	與頂部的距離	0
paddingBottom	字符串	與底部距離	0
fixedElements	字符串		無
normalScrollElements			無
afterLoad	函數	滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連接的名稱，index 是序號，從1開始計算	無
onLeave	函數	滾動前的回調函數，接收 index 和 direction 兩個參數，index 是序號，從1開始計算，direction 判斷往上滾動仍是往下滾動	無
afterRender	函數	頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數	無
afterSlideLoad	函數	滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，接收 anchorLink、index、slideIndex、direction 4個參數	無
onSlideLeave	函數	某一水平滑塊滾動前的回調函數，與 onLeave 相似，接收 anchorLink、index、slideIndex、direction 4個參數	無

github  項目地址 https://github.com/alvarotrigo/fullPage.js

文章轉載：http://www.dowebok.com/77.html

demo地址：http://view.qq.web0310.com/fullpage/