Wie das Fullpage-Plug-in schnell eine Seite mit Umblättereffekt im Vollbildmodus entwickelt

In diesem Artikel wird analysiert, wie Sie mit dem Fullpage-Plugin schnell Seiten zum Umblättern im Vollbildmodus erstellen können. Diese Funktion ist sehr fortgeschritten, um zu sehen, wie das Fullpage-Plugin funktioniert -in erzielt diesen Effekt.

Wir haben oft Websites zum Umblättern im Vollbildmodus gesehen. Sie sehen sehr hochwertig aus und es kann für einige Studenten immer noch sehr schwierig sein, sie nativ zu entwickeln.

Heute stelle ich Ihnen das Fullpage-Plugin vor, mit dem dieser Effekt ebenfalls erzielt werden kann.

Lassen Sie mich den Schülern diese Seite der Xiaomi-Website zeigen: http://www.mi.com/hongmi2a/

Nachdem wir die Seite gelesen haben, gehen wir direkt zu unserem heutigen Thema!

Einige notwendige Ressourcen

//jquery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//fullpage插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
//滚动条插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
//fullpage.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="external nofollow" >

2. Seitenstruktur

<p id="fullpage">
    <p class=&#39;section&#39;>第一页</p>
    <p class=&#39;section&#39;>第二页</p>
    <p class=&#39;section&#39;>第三页</p>
    <p class=&#39;section&#39;>第四页</p>
</p>

3. Wenn wir einen Slide-Effekt in einem haben müssen, ist die Struktur wie folgt

<p class=&#39;section&#39;>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
</p>

Dies ist Unser einfaches Seitenlayout ist fertig. Jetzt müssen wir nur noch die API-Struktur des Plug-Ins verwenden

4. Das Format und die Verwendung des Plug-Ins:

$(function(){
  $('#fullpage').fullpage({
      //API接口
  })
})

Einige API-Schnittstellen

//配置背景颜色
      sectionsColor:['red','#f04','#9b0','#d3f'],
      //配置幻灯片切换是否显示箭头，默认true
      controlArrows:false,
      //配置每页内容页面是否垂直居中，默认false
      verticalCentered:true,
      //配置文字是否随着窗口变化而变化，默认false
      resize:true,
      //配置页面滚动速度,默认700
      scrollingSpeed:1000,
      //配置锚链接，不应该和autoScrolling，scrollBar一起使用
      anchors:['page1','page2','page3','page4'],
      //配置锚点切换时候是否有过度动画，默认true
      animateAnchor:false,
      //锁定配置的锚链接是否显示，默认false
      lokAnchors:true,
      //配置动画由css3还是jquery来执行，默认true
      css3:true,
      //配置滚动到顶部之后是否从底部循环滚动，默认false
      loopTop:true,
      //相反从底部循环滚动，默认false
      loopBottom:true,
      //设置页面是否循环滚动与loopTop，loopBottom不兼容,默认是false
      continuousVertical:true,
      //幻灯片是否循环滚动，默认true
      loopHorizontal:false,
      //配置是否按照插件的方式来进行滚动，默认true,和锚点不应该一起使用，一般不设置或者保持默认
      autoScrolling:true,
      //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用，一般不设置或者保持默认
      scrollBar:false,
      //配置页面上下间距，默认0，如果需要设置固定顶部和顶部菜单导航配合使用
      // paddingTop：'300px',
      paddingBottom:0,
      //配置页面是否有固定的DOM
      fixedElements:'#header',
      //配置是否支持键盘方向键控制页面切换，默认true
      keyboardScrolling:true,
      //配置是否激活浏览器前进后退功能，如果页面设置了不按照插件的方式来滚动该配置也失效，默认true
      recordHistory:true,
      //配置菜单
      menu:'#fullpageMenu',
      //配置导航,位置，提示,显示当前位置
      navigation:true,
      navigation:'right',
      navigationTooltips:['page1','page2','page3','page4'],
      showActiveTooltip:true,
      //配置幻灯片是否显示导航,和位置
      slidesNavigation:true,
      slidesNavPosition:'bottom',
      //配置内容超过容器是否显示滚动条，模式true,
      scrollOverflow:true,
      //修改section和幻灯片默认CLASS
      sctionSelector:
      slideSelector:

Das obige ist der detaillierte Inhalt vonWie das Fullpage-Plug-in schnell eine Seite mit Umblättereffekt im Vollbildmodus entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!