-
fullpage方法的使用： $.fn.fullpage.方法名稱() 方法：moveSectionUp() moveSectionDown() moveTo(section,slide):滾動(dòng)到第幾頁(yè)，第幾個(gè)slide，頁(yè)面是從一開(kāi)始，slide是從0開(kāi)始的 moveSlideRight():幻燈片向右滾動(dòng) moveSliadLeft（）：幻燈片向左滾動(dòng) setAutoScrolling（boolean）：動(dòng)態(tài)設(shè)置autoScrolling setLockAnchors(boolean):動(dòng)態(tài)設(shè)置lockAnchor setRecordHistory(boolean):動(dòng)態(tài)設(shè)置recordHistory setScrollingSpeed(milliseconds):動(dòng)態(tài)設(shè)置scrollingspped setAllowScrolling（Boolean，[directions]）:添加或刪除鼠標(biāo)滾輪/滑動(dòng)控制，第一個(gè)參數(shù)表示是否啟用，第二個(gè)為方向：all，up，down，left，right，方向可以取多個(gè)值，用逗號(hào)隔開(kāi) destroy(type):type為空時(shí)，則fullpage特效消失，但HTML樣式，結(jié)構(gòu)仍存在；type為all時(shí)，則頁(yè)面的一切均消失 reBuild（）：重新更新頁(yè)面和尺寸，用于通過(guò)ajax請(qǐng)求后改變了頁(yè)面結(jié)構(gòu)之后，重建效果。 延遲加載圖片及視頻： <img data-src=""> <video> <source data-src="" type=""> </video>(在src之前加data-就可調(diào)用)查看全部
-
個(gè)人認(rèn)為需要更改的配置項(xiàng)： fullpage({ sectionsColor:['green','','',],//為各個(gè)section添加背景色 anchors：['page1','','',],//在各個(gè)section地址欄地址后面添加錨鏈接，使各個(gè)section地址不同，便于直接找到某一section menu：‘#ul的ID’，//(在這之前要先設(shè)置一個(gè)<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul>),data-menuanchor以及href的值都是與錨鏈接相對(duì)應(yīng)的，可以通過(guò)ul對(duì)頁(yè)面滾動(dòng)控制 scrollBar： ，//默認(rèn)為false，若為true，則頁(yè)面滾動(dòng)與滾動(dòng)條滾動(dòng)均有效 paddingTop/paddingBottom: ,//為每個(gè)section頂部或底部添加padding，默認(rèn)為0 fixedElements：‘#固定元素的ID’//固定元素，默認(rèn)為null，設(shè)置此屬性后，再在css中設(shè)置position：fixed，在頁(yè)面滾動(dòng)時(shí)，固定元素位置不動(dòng)，如果不加這個(gè)屬性，則固定元素會(huì)被section覆蓋 continuousVertial： ，//是否循環(huán)滾動(dòng)，默認(rèn)為false，若為true，則循環(huán)滾動(dòng)，但是不會(huì)像loopTop與loopBottom那樣生硬（此屬性與這兩個(gè)loop不兼容） scrollOverflow： ，//內(nèi)容超過(guò)滿屏后是否顯示滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則再引入jquery.slimscroll，這時(shí)拖動(dòng)滾動(dòng)條就會(huì)滾動(dòng)查看，這個(gè)插件主要用于模擬傳統(tǒng)的瀏覽器滾動(dòng)條 })查看全部
-
配置項(xiàng)： recordHistory： ，是否記錄瀏覽歷史，默認(rèn)為true，可以記錄頁(yè)面滾動(dòng)的歷史，可以通過(guò)瀏覽器的前進(jìn)后退來(lái)導(dǎo)航，如果設(shè)置了autoScrolling：false，則這個(gè)屬性也被關(guān)閉； menu：'#ul的ID名'，(在這之前要先設(shè)置一個(gè)<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul> ps:data-menuanchor以及href的值都是與錨鏈接相對(duì)應(yīng)的) navigation：是否顯示小圓點(diǎn)導(dǎo)航，默認(rèn)為false navigationPosition：，導(dǎo)航小圓點(diǎn)的位置，可設(shè)置為left或者right navigationTooltips：，導(dǎo)航小圓點(diǎn)的提示，與每個(gè)頁(yè)面對(duì)應(yīng)，['','','',''] showActiveTooltip: ,默認(rèn)為false，設(shè)置為true時(shí)，則在小圓點(diǎn)處會(huì)自動(dòng)顯示navigationTooltips的內(nèi)容。 slidesNavigation： ，是否顯示橫向幻燈片的導(dǎo)航，默認(rèn)為false slidesNavPosition： ，幻燈片的導(dǎo)航位置，默認(rèn)為bottom，還可為top scrollOverflow： ，內(nèi)容超過(guò)滿屏后是否顯示滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則再引入jquery.slimscroll,這時(shí)拖動(dòng)滾動(dòng)條就會(huì)滾動(dòng)查看，，這個(gè)插件主要用于模擬傳統(tǒng)的瀏覽器滾動(dòng)條 sectionSelector： ，section的選擇器，默認(rèn)為.section； slideSelector： ，slide的選擇器，默認(rèn)為slide查看全部
-
配置項(xiàng)： easing： ，定義頁(yè)面section的滾動(dòng)方式，默認(rèn)為easeInOutCubic，如果修改此項(xiàng)需引入jquery.easings插件或 jquery ui， css3： ，是否使用css3 transforms來(lái)實(shí)現(xiàn)滾動(dòng)效果，默認(rèn)為true，可以提供支持css3的瀏覽器，比如移動(dòng)設(shè)備等的速度 loopTop： ，滾動(dòng)到頂部后是否連續(xù)滾動(dòng)到底部，默認(rèn)為false； loopBottom： ，滾動(dòng)到底部以后是否連續(xù)滾動(dòng)到頂部，默認(rèn)為false； loopHorizontal： ，橫向slide是否循環(huán)滾動(dòng)，默認(rèn)為true； autoScrolling： ，是否使用插件的滾動(dòng)方式，默認(rèn)為true，，如果為false，則會(huì)出現(xiàn)瀏覽器的滾動(dòng)條，將不會(huì)按頁(yè)滾動(dòng)，而是按照滾動(dòng)條的行為來(lái)滾動(dòng)。 scrollBar： ，是否包含滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則按頁(yè)滾動(dòng)與滾動(dòng)條滾動(dòng)均有效 paddingTop/paddingBottom: ,設(shè)置每一個(gè)section的頂部和底部的padding，默認(rèn)為0； fixedElements：‘#ID名’，固定的元素，默認(rèn)值為null，需要為其配置一個(gè)jquery選擇器，在頁(yè)面滾動(dòng)的時(shí)候，fixedElements設(shè)置的元素固定不動(dòng)，如果不加這個(gè)屬性，那么你想固定的東西會(huì)被覆蓋掉； keyboardScrolling： ，是否可以使用鍵盤(pán)方向鍵導(dǎo)航，默認(rèn)為true； touchSensitivity： ，在移動(dòng)設(shè)備中滑動(dòng)頁(yè)面的敏感性，默認(rèn)為5，最高為100，越大越難滑動(dòng) continuousVertial: ,是否循環(huán)滾動(dòng)，默認(rèn)為false，如果設(shè)置為true，則頁(yè)面會(huì)循環(huán)滾動(dòng)，但是不會(huì)像loopTop/loopBottom那樣生硬（這個(gè)屬性和兩個(gè)loop不兼容）， animateAnchor：錨鏈接是否可以控制滾動(dòng)動(dòng)畫(huà)，默認(rèn)為true，若設(shè)置為false，則通過(guò)錨鏈接定位到某個(gè)section時(shí)不會(huì)有動(dòng)畫(huà)查看全部
-
fullpage.js控制頁(yè)面是否滾動(dòng)setAllowScrolling查看全部
-
還可以添加配置項(xiàng)： 在fullpage（{ sectionsColor:['','','',''],//分別為各個(gè)section設(shè)置背景顏色 controlArrows： ，默認(rèn)為true，定義是否通過(guò)箭頭來(lái)控制slide vertical： ，默認(rèn)為true，每一頁(yè)的內(nèi)容是否垂直居中； resize： ，默認(rèn)為false，字體是否隨著窗口縮放而縮放； scrollingSpeed： ，滾動(dòng)速度，單位為毫秒，默認(rèn)為700； anchors：['page1','','',''],定義錨鏈接，使每個(gè)section在地址欄有不同地址，便于直接找到某一section lockAnchors: ,默認(rèn)為false，若為true，則所添加的anchors不會(huì)自動(dòng)在地址欄生效，需手動(dòng)在地址欄地址后面加上自己的命名 }）；查看全部
-
基本頁(yè)面結(jié)構(gòu)：默認(rèn)顯示的是第一個(gè)section，要想首先顯示的不是第一個(gè)，則在想要顯示的section后加一個(gè)active類。 <div id="fullpage"> <div class="section"> <div class="slide">slide1</div>//可以給每個(gè)頁(yè)面加slide幻燈片 <div class="slide">slide2</div> <div class="slide">slide3</div> </div> <div class="section">content</div>//每一個(gè)section會(huì)成為一個(gè)頁(yè)面 <div class="section">content</div> </div> 要想激活fullpage效果，要加入： <script> $(document).ready(function(){ $('#fullpage').fullpage(); })//在加載fullpage的時(shí)候引入fullpage方法。查看全部
-
全屏基礎(chǔ)代碼，不含動(dòng)畫(huà)查看全部
-
需要在頁(yè)面引入的文件查看全部
-
到github上找到fullpage.js查看全部
-
哈哈查看全部
-
slide 幻燈片查看全部
-
cdnjs中可以搜索需要的js文件，不需要下載，只需要拷貝鏈接地址拷貝到文件里引用的地方查看全部
-
課程介紹 fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。如今我們經(jīng)常能見(jiàn)到全屏網(wǎng)站，在手機(jī)上也經(jīng)常能看到一些活動(dòng)頁(yè)面。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡(jiǎn)單的內(nèi)容，通過(guò)滾動(dòng)或者滑動(dòng)來(lái)翻頁(yè)，顯得格外的高端大氣上檔次。查看全部
-
$("#fullpage").fullpage();查看全部
舉報(bào)
0/150
提交
取消