欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全屏滾動(dòng)插件fullPage.js使用實(shí)例解析

 更新時(shí)間：2016年10月21日 09:26:29   作者：測(cè)試貓  
這篇文章主要為大家解析了全屏滾動(dòng)插件fullPage.js使用實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

如今我們經(jīng)常能看見(jiàn)到全屏網(wǎng)站，尤其是國(guó)外玩站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡(jiǎn)單的內(nèi)容，顯得格外的高端大氣上檔次。而JQuery的一款插件fullpage.js，可以實(shí)現(xiàn)全屏滾動(dòng)，非常流行的效果，兼容性IE8+兼容性不錯(cuò)，能夠兼容多種瀏覽器。

主要功能有：

支持鼠標(biāo)滾動(dòng)

支持前進(jìn)后退和鍵盤(pán)控制

多個(gè)會(huì)調(diào)函數(shù)

支持手機(jī)、平板觸摸事件

支持CSS3動(dòng)畫(huà)

支持窗口縮放

窗口縮放時(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為加載的頁(yè)面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)頁(yè)面，類名可改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ì)頁(yè)面進(jìn)行參數(shù)配置)

<script type="text/javascript"> 
  $(document).ready(function(){ 
    //配置項(xiàng) 
    $("#fullpage").fullpage({ 
      //可以為每一個(gè)section設(shè)置background-color屬性 
      sectionsColor:["green","orange","gray","red"], 
       
      //定義是否通過(guò)箭頭來(lái)控制slide幻燈片，默認(rèn)為true。當(dāng)我們?cè)O(shè)置為false，則幻燈片左右兩則的箭頭就會(huì)消失，在移動(dòng)設(shè)備上，我們可以通過(guò)滑動(dòng)來(lái)操作幻燈片 
      controlArrows:true, 
       
      //每一頁(yè)的內(nèi)容是否垂直居中,默認(rèn)為true.一般保持默認(rèn)值 
      verticalCentered:true, 
       
      //滾動(dòng)速度，單位為毫秒，默認(rèn)為700 
      scrollingSpeed:1000, 
       
      //定義錨連接，默認(rèn)為[]。有了錨鏈接，用戶就可以快速打開(kāi)定位到某一頁(yè)面 
      //注意定義錨鏈接的時(shí)候，值不要和頁(yè)面中任意的id或name相同，尤其是在IE瀏覽器下。而且定義時(shí)不需要要加# 
      anchors:["page1","page2","page3","page4"], 
       
      //是否鎖定錨鏈接，默認(rèn)為false。如果設(shè)置為true，那么定義的錨鏈接，也就是anchors屬性則沒(méi)有效果。這個(gè)配置項(xiàng)使用的比較少 
      lockAnchors:false, 
       
      //定義頁(yè)面section滾動(dòng)的動(dòng)畫(huà)方式,如果修改此項(xiàng),需要引入jquery.easings插件，或者jquery ui 
      easing:"easeInOutCubic", 
       
      //是否使用CSS3 transforms 來(lái)實(shí)現(xiàn)滾動(dòng)效果，默認(rèn)為true。這個(gè)配置項(xiàng)可以提高支持css3的瀏覽器，比如移動(dòng)設(shè)備等的速度，如果瀏覽器不支持css3，則會(huì)使用jquery來(lái)替代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ì)按頁(yè)滾動(dòng)，而是按照滾動(dòng)條的默認(rèn)行為來(lái)滾動(dòng) 
      autoScrolling:true, 
       
      //是否包含滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則瀏覽器自帶的滾動(dòng)條出現(xiàn)，頁(yè)面滾動(dòng)時(shí)還是按頁(yè)滾動(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選擇器。在頁(yè)面滾動(dòng)的時(shí)候，fixedElements設(shè)置的元素固定不動(dòng) 
      fixedElements:"", 
       
      //是否可以使用鍵盤(pán)方向鍵導(dǎo)航，默認(rèn)為true 
      keyboardScrolling:true, 
       
      //在移動(dòng)設(shè)備中滑動(dòng)頁(yè)面的敏感性，默認(rèn)為5，是按百分比來(lái)衡量，最高為100,越大則越難滑動(dòng) 
      touchSensitivity:5, 
       
      //是否循環(huán)滾動(dòng)，默認(rèn)為false。如果設(shè)置為true，則頁(yè)面會(huì)循環(huán)滾動(dòng)，而不像loopTop或loopBottom那樣出現(xiàn)跳動(dòng)，注意這個(gè)屬性和這兩者不兼容，請(qǐng)不要同時(shí)使用 
      continuousVertical:false, 
       
      //錨鏈接是否可以控制滾動(dòng)動(dòng)畫(huà)，默認(rèn)為true。如果設(shè)置為false，則通過(guò)錨鏈接定位到某個(gè)頁(yè)面顯示不再有動(dòng)畫(huà)效果 
      animateAnchor:true, 
       
      //是否記錄歷史，默認(rèn)為true，可以記錄頁(yè)面滾動(dòng)的歷史，通過(guò)瀏覽器的前進(jìn)后退來(lái)導(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)前頁(yè)面的導(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)容超過(guò)滿屏后是否顯示滾動(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)用，這里我沒(méi)調(diào)用)

//方法函數(shù) 
        $.fn.fullpage.xxx()//調(diào)用方法 
        $.fn.fullpage.moveSectionUp();//向上滾動(dòng)一頁(yè) 
        $.fn.fullpage.moveSectionDown();//向下滾動(dòng)一頁(yè) 
        $.fn.fullpage.moveTo(section,slide);//滾動(dòng)到第幾頁(yè)，第幾個(gè)幻燈片，注意，頁(yè)面是從1開(kāi)始，而幻燈片是從0開(kāi)始 
        $.fn.fullpage.silentMoveTo(section,slide);//滾動(dòng)到第幾頁(yè)，第幾個(gè)幻燈片和moveTo一樣，但是沒(méi)有動(dòng)畫(huà)效果 
        $.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可以不寫(xiě)，或者使用all，不寫(xiě)type，fullpage給頁(yè)面添加的樣式和html元素還在如果使用all，則樣式、html等全部銷毀，頁(yè)面恢復(fù)和不使用fullpage相同的效果 
        $.fn.fullpage.reBuild();//重新更新頁(yè)面和尺寸，用于通過(guò)ajax請(qǐng)求后改變了頁(yè)面結(jié)構(gòu)之后，重建效果

演示效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論