Vollbild-Plug-in-Entwicklung, Schritte zum Umblättern im Vollbildmodus, detaillierte Erklärung

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Entwickeln des Umblätterns im Vollbildmodus mit dem Fullpage-Plug-in. Was sind die Vorsichtsmaßnahmen für das Entwickeln des Umblätterns im Vollbildmodus? Werfen wir einen Blick auf das Fullpage-Plugin.

Wir haben schon 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 heute direkt zu unserem Thema über!

1. 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 in einem einen Slide-Effekt benötigen, 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 und es ist fertig. Jetzt müssen wir nur noch die API-Struktur des Plug-Ins verwenden

4. Plug-in-Format und Verwendung:

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

5. 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:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonVollbild-Plug-in-Entwicklung, Schritte zum Umblättern im Vollbildmodus, detaillierte Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!