-
fullPage支持延遲加載圖片和視頻（Lazy Loading） 圖片： <img daye-src="image.png"> 視頻： <video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> </video>查看全部
-
方法 .moveSectionUp(): 向上滾動一頁 .moveSectionDown(): 向下滾動一頁 .moveTo(section,slide): 滾動到第幾頁，第幾個幻燈片，注意，頁面是1開始，而幻燈片，是從0開始。 .slientMoveTo(section,slide): 滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。 .moveSlideRight(): 幻燈片向右滾動 .moveSlideLeft(): 幻燈片向左滾動。 .slientMoveTo(section,slide): 滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。 .moveSlideRight(): 幻燈片向右滾動 .moveSlideLeft(): 幻燈片向左滾動 .setAutoScrolling(boolean): 動態(tài)設(shè)置autoScrolling .setLockAnchors(boolean): 動態(tài)設(shè)置lockAnchors .setRecordHistory(boolean): 動態(tài)設(shè)置recordHistory .setScrollingSpeed(milliseconds): 動態(tài)設(shè)置scrollingSpeed .setAllowScrolling(boolean,[directions]): 添加或刪除鼠標(biāo)滾輪/滑動控制，第一個參數(shù)true為啟用，false為禁用，后面的參數(shù)為方向，取值包含all,up,down,left,right,可以使用多個，逗號分隔 比如我們在做一個有獎問答頁面，提問的問題在前面的頁面有答案，當(dāng)滾動到最后一頁時，不希望用戶在滾動回之前的頁面查看答案，就可以使用這樣的方法。 .destroy(type) 銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpaga給頁面添加的樣式和html元素還在，如果使用all，則樣式、html等全部銷毀，頁面恢復(fù)和不使用fullpage相同的效果。 .reBuild() 重新更新頁面和尺寸，用于通過ajax請求后改變了頁面結(jié)構(gòu)之后，重建效果。查看全部
-
.recordHistory: 是否記錄歷史，默認(rèn)為true，可以記錄頁面滾動的歷史，通過瀏覽器的前進(jìn)后退來導(dǎo)航。注意如果設(shè)置了autoScrolling：false，那么這個配置也將被關(guān)閉，即設(shè)置為false。 .menu： 綁定菜單，設(shè)定的相關(guān)屬性與anchors的值對應(yīng)后，菜單可以控制滾動，默認(rèn)為false?？梢栽O(shè)置為菜單的jquery選擇器 .navigation: 是否顯示導(dǎo)航，默認(rèn)為false。如果設(shè)置為true，會顯示小圓點，作為導(dǎo)航。 .navigationPosition： 導(dǎo)航小圓點的位置，可以設(shè)置為left或right。 navigationTooltips: 導(dǎo)航小圓點的tooltips設(shè)置鼠標(biāo)經(jīng)過時顯示的名字，默認(rèn)為[]，注意按照順序設(shè)置。 .showActiveTooltip： 是否顯示當(dāng)前頁面的導(dǎo)航的tooltip信息，默認(rèn)為false .slidesNavigation： 是否顯示橫向幻燈片的導(dǎo)航，默認(rèn)false。 .slidesNavPosition： 橫向幻燈片導(dǎo)航的位置，默認(rèn)為bottom，可以設(shè)置為top或bottom .scrollOverflow： 內(nèi)容超過滿屏后是否顯示滾動條，默認(rèn)為false。如果設(shè)置為true，則會顯示滾動條，如果要滾動查看內(nèi)容，還需要jquery.slimscroll插件的配合。slimscroll插件主要用于模擬傳統(tǒng)的瀏覽器滾動條。 .sectionSelector：section的選擇器，默認(rèn)為.section。 .slideSelector：slide的選擇器，默認(rèn)為.slide。查看全部
-
.touchSensitivity： 在移動設(shè)備中滑動頁面的敏感性，默認(rèn)為5，是按百分比來衡量，最高為100，越大則越難滑動。 .continuousVertical:是否循環(huán)滾動，默認(rèn)為false。如果設(shè)置為true，則頁面會循環(huán)滾動，而不像loopTop或loopBottom那樣出現(xiàn)跳動，注意這個屬性和loopTop、loopBottom不兼容，不要同時設(shè)置。 .animateAnchor： 錨鏈接是否可以控制滾動動畫，默認(rèn)為true。如果設(shè)置為false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果。查看全部
-
.easing: 定義頁面section滾動的動畫方式，默認(rèn)為easeInOutCubic，如果修改此項，需要引入jquery。easings插件，或者jquery ui。 .css3: 是否使用css3 transforms來實現(xiàn)滾動效果，默認(rèn)為true。這個配置項可以提高支持css3的瀏覽器，比如移動設(shè)備等的速度，如果瀏覽器不支持css3，則會使用jquery來替代css3實現(xiàn)滾動效果。即優(yōu)雅降級，使用jquery實現(xiàn)動畫，一般來說，它的性能不如css動畫來得快。 .loopTop: 滾動到最頂部后是否連續(xù)滾動到底部，默認(rèn)為false。 .loopBottom： 滾動到最底部后是否連續(xù)滾動回頂部，默認(rèn)為false。 .loopHorizontal： 橫向slider幻燈片是否循環(huán)滾動，默認(rèn)為true。設(shè)置為false時，在第一個slider時，沒有向左滾動的箭頭，不能向左滾動。同理，最后一個slider時，沒有向右滾動的箭頭，不能向右滾動。 .autoScrolling： 是否使用插件的滾動方式，默認(rèn)為true，如果選擇false，則會出現(xiàn)瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認(rèn)行為來滾動。 .scrollBar： 是否包含滾動條，默認(rèn)為false，如果設(shè)置為true，則瀏覽器自帶的滾動條出現(xiàn)，頁面滾動時還是按頁滾動，但是滾動條的默認(rèn)行為也有效。 .paddingTop/paddingBottom： 設(shè)置每一個section頂部和底部的padding，默認(rèn)都為0.一般如果我們需要設(shè)置一個固定在頂部或者底部的菜單、導(dǎo)航、元素等，可以使用這兩個配置項。 .fixedElements： 固定的元素，默認(rèn)為null，需要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設(shè)置的元素固定不動。 .keyboardScrolling： 是否可以使用鍵盤方向鍵導(dǎo)航，默認(rèn)為true。查看全部
-
fullpage全屏滾動插件查看全部
-
如何使用： 一、引入相關(guān)文件 1.css文件：jquery.fukkPage.css 2.jquery文件：1.6以上版本即可 3.easing文件：jquery.easing.js，支持更多動畫過渡效果的插件,可選的，非必須 4.fullPage文件：jquery.fullPage.js 注意： 1.使用cdn上的文件，而非本地文件，當(dāng)部署到自己網(wǎng)站時，可以減輕自己服務(wù)器的壓力，提高用戶的訪問速度 2.https://cdnjs.com上的fullPage.js版本是最新的 二、頁面的基本結(jié)構(gòu) <div id="fullpage"> <div class="section"> //每一個session對應(yīng)一個頁面 <div class="slide">slide1</div>//可以給每個頁面加slide幻燈片 <div class="slide">slide2</div> <div class="slide">slide3</div> </div> <div class="section"><h1>這是第二屏</h1></div> <div class="section">content</div> </div> 三、要想激活fullpage效果，需要加入： <script> $(document).ready(function(){ $('#fullpage').fullpage(); })//在加載fullpage的時候引入fullpage方法。 </script>查看全部
-
fullPage.js 一、是一個基于jQuery的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站，主要功能有： 1.支持鼠標(biāo)滾動 2.多個回調(diào)函數(shù) 3.支持手機(jī)、平板觸屏事件 4.支持css3動畫 5.支持窗口縮放 6.窗口縮放時自動調(diào)整 7.可設(shè)置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調(diào)、文本對齊方式等 二、獲取方式： github主頁：https://github.com/alvarotrigo/fullPage.js 三、兼容性及大小、版本 支持所有主流瀏覽器，除IE6、IE7 7kb 最新版本是V2.6.7查看全部
-
Move.js .set()方法用于設(shè)置元素的css屬性，他帶有兩個參數(shù)：css屬性和屬性值。 .scale()方法用于放大或壓縮元素的大小，按照提供的每一個值，將調(diào)用transform的scale方法。 .rotate(deg)方法通過提供的數(shù)值作為參數(shù)來旋轉(zhuǎn)元素。當(dāng)方法被調(diào)用的時候通過附加到元素的transform屬性上。 .eng()方法用于Move.js代碼片段的結(jié)束，它標(biāo)識動畫的結(jié)束。技術(shù)上，該方法觸發(fā)動畫的播放。該方法接受一個可選的callback回掉函數(shù)。查看全部
-
fullpage回調(diào)函數(shù) 幻燈片查看全部
-
fullpage回調(diào)函數(shù) afterRender() afterResize()查看全部
-
fullpage回調(diào)函數(shù) onLeave(index,nextIndex,direction)查看全部
-
fullpage回調(diào) afterLoad(anchorLink,index)查看全部
-
實現(xiàn)效果 .設(shè)計頁面 .準(zhǔn)備文字和圖片素材 .按照設(shè)計實現(xiàn)基本的頁面效果 .實現(xiàn)動畫查看全部
-
回調(diào) .afterSlideLoad(anchorLink,index,slideAnchor,slideIndex) 滾動到某一幻燈片后的回調(diào)函數(shù)，與afterLoad類似，接受anchorLink、index、slidIndex、direction4個參數(shù)。 .onSlideLeave(anchorLink，index，slideIndex，direction，nextSlideIndex) 在我們離開一個slide時，會觸發(fā)一次此回調(diào)函數(shù)，與onLeave類似，接收anchorLink、index、slideIndex、direction4個參數(shù)查看全部
舉報
0/150
提交
取消