全屏滾動(dòng)插件fullPage.js使用實(shí)例解析
如今我們經(jīng)常能看見到全屏網(wǎng)站,尤其是國外玩站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內(nèi)容,顯得格外的高端大氣上檔次。而JQuery的一款插件fullpage.js,可以實(shí)現(xiàn)全屏滾動(dòng),非常流行的效果,兼容性IE8+兼容性不錯(cuò),能夠兼容多種瀏覽器。
主要功能有:
支持鼠標(biāo)滾動(dòng)
支持前進(jìn)后退和鍵盤控制
多個(gè)會(huì)調(diào)函數(shù)
支持手機(jī)、平板觸摸事件
支持CSS3動(dòng)畫
支持窗口縮放
窗口縮放時(shí)自動(dòng)調(diào)整
可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對(duì)齊方式等等
準(zhǔn)備工作(下載jquery.fullPage.js和jquery.fullPage.css插件)
網(wǎng)址:插件下載地址(https://github.com/alvarotrigo/fullPage.js)
代碼的外聯(lián)式引用(包括jquery-2.1.0.js)一共3個(gè)
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>
HTML腳本
<ul id="fullpageMenu"><!--ul導(dǎo)航欄按鈕data-menuanchor為加載的頁面page--> <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li> <li data-menuanchor = "page2"><a href="#page2">section2</a></li> <li data-menuanchor = "page3"><a href="#page3">section3</a></li> <li data-menuanchor = "page4"><a href="#page4">section4</a></li> </ul> <div id="fullpage"><!--div為容器,這里要用id名為fullpage--> <div class="section"><!--默認(rèn)的上下滾動(dòng)頁面,類名可改sectionSelector:".section",不改默認(rèn)類名要為section--> <h1>這是第一屏</h1> </div> <div class="section"> <div class="slide">幻燈片1</div><!--默認(rèn)的左右滾動(dòng)幻燈片,類名可改slideSelector:".slide",不改默認(rèn)類名要為slide--> <div class="slide">幻燈片2</div> <div class="slide">幻燈片3</div> <div class="slide">幻燈片4</div> </div> <div class="section"> <h1>這是第三屏</h1> </div> <div class="section"> <h1>這是第四屏</h1> </div> </div>
CSS布局
<style type="text/css"> *{ margin: 0; padding: 0; } .slide{ font-size: 60px; text-align: center; } #fullpageMenu{ font-size: 30px; position: fixed; top: 0; z-index: 1; list-style: none; } #fullpageMenu li a{ text-decoration: none; } #fullpageMenu li{ background-color: mediumaquamarine; border: 1px solid black; padding: 8px; cursor: pointer; text-align: center; } #fullpageMenu li:hover{ background-color: orange; } </style>
jQuery腳本(主要用fullPage.js對(duì)頁面進(jìn)行參數(shù)配置)
<script type="text/javascript"> $(document).ready(function(){ //配置項(xiàng) $("#fullpage").fullpage({ //可以為每一個(gè)section設(shè)置background-color屬性 sectionsColor:["green","orange","gray","red"], //定義是否通過箭頭來控制slide幻燈片,默認(rèn)為true。當(dāng)我們?cè)O(shè)置為false,則幻燈片左右兩則的箭頭就會(huì)消失,在移動(dòng)設(shè)備上,我們可以通過滑動(dòng)來操作幻燈片 controlArrows:true, //每一頁的內(nèi)容是否垂直居中,默認(rèn)為true.一般保持默認(rèn)值 verticalCentered:true, //滾動(dòng)速度,單位為毫秒,默認(rèn)為700 scrollingSpeed:1000, //定義錨連接,默認(rèn)為[]。有了錨鏈接,用戶就可以快速打開定位到某一頁面 //注意定義錨鏈接的時(shí)候,值不要和頁面中任意的id或name相同,尤其是在IE瀏覽器下。而且定義時(shí)不需要要加# anchors:["page1","page2","page3","page4"], //是否鎖定錨鏈接,默認(rèn)為false。如果設(shè)置為true,那么定義的錨鏈接,也就是anchors屬性則沒有效果。這個(gè)配置項(xiàng)使用的比較少 lockAnchors:false, //定義頁面section滾動(dòng)的動(dòng)畫方式,如果修改此項(xiàng),需要引入jquery.easings插件,或者jquery ui easing:"easeInOutCubic", //是否使用CSS3 transforms 來實(shí)現(xiàn)滾動(dòng)效果,默認(rèn)為true。這個(gè)配置項(xiàng)可以提高支持css3的瀏覽器,比如移動(dòng)設(shè)備等的速度,如果瀏覽器不支持css3,則會(huì)使用jquery來替代css3實(shí)現(xiàn)滾動(dòng)效果 css3:true, //滾動(dòng)到最頂部后是否連續(xù)滾動(dòng)到底部,默認(rèn)為false loopTop:false, //滾動(dòng)到最底部是否連續(xù)滾動(dòng)回頂部,默認(rèn)為false loopBottom:false, //橫向slider幻燈片是否循環(huán)滾動(dòng),默認(rèn)為true loopHorizontal:true, //是否使用插件的滾動(dòng)方式,默認(rèn)為true,如果選擇false,則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條,將不會(huì)按頁滾動(dòng),而是按照滾動(dòng)條的默認(rèn)行為來滾動(dòng) autoScrolling:true, //是否包含滾動(dòng)條,默認(rèn)為false,如果設(shè)置為true,則瀏覽器自帶的滾動(dòng)條出現(xiàn),頁面滾動(dòng)時(shí)還是按頁滾動(dòng),但是滾動(dòng)條的默認(rèn)行為也有效 scrollBar:false, //設(shè)置每一個(gè)section頂部和底部的padding,默認(rèn)為0,一般如果需要設(shè)置一個(gè)固定頂部或者底部的菜單、導(dǎo)航、元素等,可以使用這兩個(gè)配置項(xiàng) paddingTop:0, paddingBottom:0, //固定的元素,默認(rèn)為null,需要配置一個(gè)jquery選擇器。在頁面滾動(dòng)的時(shí)候,fixedElements設(shè)置的元素固定不動(dòng) fixedElements:"", //是否可以使用鍵盤方向鍵導(dǎo)航,默認(rèn)為true keyboardScrolling:true, //在移動(dòng)設(shè)備中滑動(dòng)頁面的敏感性,默認(rèn)為5,是按百分比來衡量,最高為100,越大則越難滑動(dòng) touchSensitivity:5, //是否循環(huán)滾動(dòng),默認(rèn)為false。如果設(shè)置為true,則頁面會(huì)循環(huán)滾動(dòng),而不像loopTop或loopBottom那樣出現(xiàn)跳動(dòng),注意這個(gè)屬性和這兩者不兼容,請(qǐng)不要同時(shí)使用 continuousVertical:false, //錨鏈接是否可以控制滾動(dòng)動(dòng)畫,默認(rèn)為true。如果設(shè)置為false,則通過錨鏈接定位到某個(gè)頁面顯示不再有動(dòng)畫效果 animateAnchor:true, //是否記錄歷史,默認(rèn)為true,可以記錄頁面滾動(dòng)的歷史,通過瀏覽器的前進(jìn)后退來導(dǎo)航。注意如果設(shè)置了autoScrolling:false,那么這個(gè)配置也將被關(guān)閉,即設(shè)置為false recordHistory:true, //綁定菜單,設(shè)定的相關(guān)屬性與anchors的值對(duì)應(yīng)后,菜單可以控制滾動(dòng),默認(rèn)為false??梢栽O(shè)置為菜單的jquery選擇器 menu:false, //是否顯示導(dǎo)航,默認(rèn)為false。如果設(shè)置為true,會(huì)顯示小圓點(diǎn),作為導(dǎo)航 navigation:true, //導(dǎo)航小圓點(diǎn)的位置,可以設(shè)置為left或者right navigationPosition:"right", //導(dǎo)航小圓點(diǎn)的tooltips設(shè)置,默認(rèn)為[],注意按照順序設(shè)置 navigationTooltips:["page1","page2","page3","page4"], //是否顯示當(dāng)前頁面的導(dǎo)航的tooltip信息,默認(rèn)為false showActiveTooltip:true, //是否顯示橫向幻燈片的導(dǎo)航,默認(rèn)為false slidesNavigation:true, //橫向幻燈片導(dǎo)航的位置,默認(rèn)為bottom,可以設(shè)置為top或bottom slidesNavPosition:"top", //內(nèi)容超過滿屏后是否顯示滾動(dòng)條,默認(rèn)為false。如果設(shè)置為true,則會(huì)顯示滾動(dòng)條,如果滾動(dòng)查看內(nèi)容,還需要jquery.slimscroll插件的配合 scrollOverflow:false, //section的選擇器,默認(rèn)為.section sectionSelector:".section", //slideSelector:slide的選擇器,默認(rèn)為.slide slideSelector:".slide", }); }) </script>
還有一些fullPage里的方法函數(shù)(可調(diào)用,這里我沒調(diào)用)
//方法函數(shù) $.fn.fullpage.xxx()//調(diào)用方法 $.fn.fullpage.moveSectionUp();//向上滾動(dòng)一頁 $.fn.fullpage.moveSectionDown();//向下滾動(dòng)一頁 $.fn.fullpage.moveTo(section,slide);//滾動(dòng)到第幾頁,第幾個(gè)幻燈片,注意,頁面是從1開始,而幻燈片是從0開始 $.fn.fullpage.silentMoveTo(section,slide);//滾動(dòng)到第幾頁,第幾個(gè)幻燈片和moveTo一樣,但是沒有動(dòng)畫效果 $.fn.fullpage.moveSlideRight();//幻燈片向右滾動(dòng) $.fn.fullpage.moveSlideLeft();//幻燈片向左滾動(dòng) $.fn.fullpage.setAutoScrolling(Boolean);//動(dòng)態(tài)設(shè)置autoScrolling $.fn.fullpage.setLockAnchors(Boolean);//動(dòng)態(tài)設(shè)置lockAnchors $.fn.fullpage.setRecordHistory(Boolean);//動(dòng)態(tài)設(shè)置recordHistory $.fn.fullpage.setScrollingSpeed(milliseconds);//動(dòng)態(tài)設(shè)置scrollingSpeed $.fn.fullpage.destroy(type);//銷毀fullpage特效,type可以不寫,或者使用all,不寫type,fullpage給頁面添加的樣式和html元素還在如果使用all,則樣式、html等全部銷毀,頁面恢復(fù)和不使用fullpage相同的效果 $.fn.fullpage.reBuild();//重新更新頁面和尺寸,用于通過ajax請(qǐng)求后改變了頁面結(jié)構(gòu)之后,重建效果
演示效果:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
webpack打包優(yōu)化的幾個(gè)方法總結(jié)
這篇文章主要介紹了webpack打包優(yōu)化的幾個(gè)方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02javaScript生成支持中文帶logo的二維碼(jquery.qrcode.js)
這篇文章主要介紹了javaScript生成二維碼,改造jquery.qrcode.js,使之支持中文,能帶logo的二維碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù),以及refresh更新數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08JavaScript Event學(xué)習(xí)第七章 事件屬性
為了理解Event屬性,我將在這里給出一些示例代碼。在這個(gè)范疇內(nèi)有非常嚴(yán)重的瀏覽器兼容性問題。2010-02-02JS中append字符串包含onclick無效傳遞參數(shù)失敗的解決方案
這篇文章主要介紹了JS中append字符串包含onclick無效傳遞參數(shù)失敗的解決方案,需要的朋友可以參考下2016-12-12lhgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猯hgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了使用js和canvas實(shí)現(xiàn)時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09實(shí)例解析ES6 Proxy使用場(chǎng)景介紹
本篇文章主要介紹了ES6 Proxy使用場(chǎng)景介紹,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01BootStrap柵格系統(tǒng)、表單樣式與按鈕樣式源碼解析
這篇文章主要為大家詳細(xì)解析了BootStrap柵格系統(tǒng)、表單樣式與按鈕樣式源碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01