De nos jours, nous voyons souvent des sites Web en plein écran, notamment des sites de jeux étrangers. Ces sites Web utilisent plusieurs grandes images ou blocs de couleurs comme arrière-plans, puis ajoutent du contenu simple, ce qui leur donne un aspect particulièrement haut de gamme et élégant. Fullpage.js, un plug-in pour JQuery, peut réaliser un défilement plein écran, un effet très populaire. Il a une bonne compatibilité avec IE8 et est compatible avec plusieurs navigateurs.

Les fonctions principales sont?:

Prend en charge le défilement de la souris

Prend en charge le contr?le avant, arrière et du clavier

Fonctions de conférence multiples

Prend en charge le mobile téléphones, événements tactiles sur tablette

Prise en charge de l'animation CSS3

Prise en charge de la mise à l'échelle de la fenêtre

Ajustement automatique lors du zoom de la fenêtre

Peut définir la largeur de défilement, la couleur d'arrière-plan et la vitesse de défilement , Options de boucle, rappels, alignement du texte, etc.

Préparation (télécharger les plug-ins jquery.fullPage.js et jquery.fullPage.css)

Site Web?: Adresse de téléchargement du plug-in (https ://github .com/alvarotrigo/fullPage.js)

Un total de 3 références externes du code (dont jquery-2.1.0.js)

<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>

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)的上下滾動頁面，類名可改sectionSelector:".section"，不改默認(rèn)類名要為section-->
        <h1>這是第一屏</h1>
      </div>
      <div class="section">
        <div class="slide">幻燈片1</div><!--默認(rèn)的左右滾動幻燈片，類名可改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>

Mise en page 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>

Script jQuery (utilisant principalement fullPage.js pour configurer les paramètres de la page)

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

Il y a aussi une fonction de méthode fullPage (appelable, je ne l'ai pas appelée ici)

//方法函數(shù)
        $.fn.fullpage.xxx()//調(diào)用方法
        $.fn.fullpage.moveSectionUp();//向上滾動一頁
        $.fn.fullpage.moveSectionDown();//向下滾動一頁
        $.fn.fullpage.moveTo(section,slide);//滾動到第幾頁，第幾個幻燈片，注意，頁面是從1開始，而幻燈片是從0開始
        $.fn.fullpage.silentMoveTo(section,slide);//滾動到第幾頁，第幾個幻燈片和moveTo一樣，但是沒有動畫效果
        $.fn.fullpage.moveSlideRight();//幻燈片向右滾動
        $.fn.fullpage.moveSlideLeft();//幻燈片向左滾動
        $.fn.fullpage.setAutoScrolling(Boolean);//動態(tài)設(shè)置autoScrolling
        $.fn.fullpage.setLockAnchors(Boolean);//動態(tài)設(shè)置lockAnchors
        $.fn.fullpage.setRecordHistory(Boolean);//動態(tài)設(shè)置recordHistory
        $.fn.fullpage.setScrollingSpeed(milliseconds);//動態(tài)設(shè)置scrollingSpeed
        $.fn.fullpage.destroy(type);//銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpage給頁面添加的樣式和html元素還在如果使用all，則樣式、html等全部銷毀，頁面恢復(fù)和不使用fullpage相同的效果
        $.fn.fullpage.reBuild();//重新更新頁面和尺寸，用于通過ajax請求后改變了頁面結(jié)構(gòu)之后，重建效果

Effet de démonstration?:

Ce qui précède est le contenu entier de l'article, j'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'exemples d'utilisation du plug-in de défilement plein écran fullPage.js et d'articles connexes, veuillez faire attention au site Web PHP chinois?!