?

?

?

?

演 示?下 載

簡介

如今我們經(jīng)常能見到全屏網(wǎng)站，尤其是國外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內(nèi)容，顯得格外的高端大氣上檔次。比如 iPhone 5C 的介紹頁面（查看），QQ瀏覽器的官網(wǎng)站。如果你也希望你的網(wǎng)站能設(shè)計(jì)成全屏的，顯得更上檔次，你可以試試 fullPage.js。

fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站，主要功能有：

• 支持鼠標(biāo)滾動(dòng)
• 支持前進(jìn)后退和鍵盤控制
• 多個(gè)回調(diào)函數(shù)
• 支持手機(jī)、平板觸摸事件
• 支持 CSS3 動(dòng)畫
• 支持窗口縮放
• 窗口縮放時(shí)自動(dòng)調(diào)整
• 可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對齊方式等等

兼容性

jQuery 兼容

兼容 jQuery 1.7+。

瀏覽器兼容

IE8+ ?	Chrome ?	Firefox ?	Opera ?	Safari ?

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 用于 easing 參數(shù)，也可以使用完整的 jQuery UI 代替，如果不需要設(shè)置 easing 參數(shù)，可去掉改文件 --> <script src="js/jquery.easings.min.js"></script><!-- 如果 scrollOverflow 設(shè)置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 --> <script src="js/jquery.slimscroll.min.js"></script><script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="dowebok"><div class="section"><h3>第一屏</h3></div><div class="section"><h3>第二屏</h3></div><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3></div> </div>

每個(gè) section 代表一屏，默認(rèn)顯示“第一屏”，如果要指定加載頁面時(shí)顯示的“屏幕”，可以在對應(yīng)的 section 加上 class=”active”，如：

<div class="section active">第三屏</div>

同時(shí)，可以在 section 內(nèi)加入 slide，如：

<div id="dowebok"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section"><div class="slide">第三屏的第一屏</div><div class="slide">第三屏的第二屏</div><div class="slide">第三屏的第三屏</div><div class="slide">第三屏的第四屏</div></div><div class="section">第四屏</div> </div>

3、JavaScript

$(function(){$('#dowebok').fullpage(); });

配置

1、選項(xiàng)

選項(xiàng)類型默認(rèn)值說明

verticalCentered	字符串	true	內(nèi)容是否垂直居中
resize	布爾值	false	字體是否隨著窗口縮放而縮放
slidesColor	函數(shù)	無	設(shè)置背景顏色
anchors	數(shù)組	無	定義錨鏈接
scrollingSpeed	整數(shù)	700	滾動(dòng)速度，單位為毫秒
easing	字符串	easeInQuart	滾動(dòng)動(dòng)畫方式
menu	布爾值	false	綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對應(yīng)后，菜單可以控制滾動(dòng)
navigation	布爾值	false	是否顯示項(xiàng)目導(dǎo)航
navigationPosition	字符串	right	項(xiàng)目導(dǎo)航的位置，可選 left 或 right
navigationColor	字符串	#000	項(xiàng)目導(dǎo)航的顏色
navigationTooltips	數(shù)組	空	項(xiàng)目導(dǎo)航的 tip
slidesNavigation	布爾值	false	是否顯示左右滑塊的項(xiàng)目導(dǎo)航
slidesNavPosition	字符串	bottom	左右滑塊的項(xiàng)目導(dǎo)航的位置，可選 top 或 bottom
controlArrowColor	字符串	#fff	左右滑塊的箭頭的背景顏色
loopBottom	布爾值	false	滾動(dòng)到最底部后是否滾回頂部
loopTop	布爾值	false	滾動(dòng)到最頂部后是否滾底部
loopHorizontal	布爾值	true	左右滑塊是否循環(huán)滑動(dòng)
autoScrolling	布爾值	true	是否使用插件的滾動(dòng)方式，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條
scrollOverflow	布爾值	false	內(nèi)容超過滿屏后是否顯示滾動(dòng)條
css3	布爾值	false	是否使用 CSS3 transforms 滾動(dòng)
paddingTop	字符串	0	與頂部的距離
paddingBottom	字符串	0	與底部距離
fixedElements	字符串	無	?
normalScrollElements	?	無	?
keyboardScrolling	布爾值	true	是否使用鍵盤方向鍵導(dǎo)航
touchSensitivity	整數(shù)	5	?
continuousVertical	布爾值	false	是否循環(huán)滾動(dòng)，與 loopTop 及 loopBottom 不兼容
animateAnchor	布爾值	true	?
normalScrollElementTouchThreshold	整數(shù)	5	?

2、方法

名稱說明

moveSectionUp()	向上滾動(dòng)
moveSectionDown()	向下滾動(dòng)
moveTo(section, slide)	滾動(dòng)到
moveSlideRight()	slide 向右滾動(dòng)
moveSlideLeft()	slide 向左滾動(dòng)
setAutoScrolling()	設(shè)置頁面滾動(dòng)方式，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng)
setAllowScrolling()	添加或刪除鼠標(biāo)滾輪/觸控板控制
setKeyboardScrolling()	添加或刪除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒為單位的滾動(dòng)速度

3、回調(diào)函數(shù)

?

名稱說明

afterLoad	滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計(jì)算
onLeave	滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)：index 是離開的“頁面”的序號，從1開始計(jì)算； ? nextIndex 是滾動(dòng)到的“頁面”的序號，從1開始計(jì)算； direction 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down。
afterRender	頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)，或者說頁面初始化完成后的回調(diào)函數(shù)
afterSlideLoad	滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù)
onSlideLeave	某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù)

from:http://www.dowebok.com/77.html

轉(zhuǎn)載于:https://www.cnblogs.com/luhongjian/p/5461359.html

總結(jié)

以上是生活随笔為你收集整理的jQuery全屏滚动插件fullPage.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。