Fullpage plug-in development full screen page turning steps explained in detail

This time I will bring you a detailed explanation of the steps for developing full-screen page turning using the Fullpage plug-in. What are the precautions for developing full-screen page turning using the Fullpage plug-in? The following is a practical case. Let’s take a look at it. .

We have often seen some full-screen page-turning websites. They look very high-end, and it may still be very difficult for some students to develop them natively.

Today I will introduce to you the Fullpage plug-in, which can also achieve this effect.

Now let me show the students this page of Xiaomi website: http://www.mi.com/hongmi2a/

After reading the page, let’s go directly to our topic today!

1. Some necessary resources

//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. Page structure

<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. If we need to have a slide effect in one, the structure is as follows

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

This is our simple page layout is completed, now we only need to use the plug-in’s api structure

4. Plug-in format and usage:

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

5. Part of the API interface

//配置背景颜色
      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:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Fullpage plug-in development full screen page turning steps explained in detail. For more information, please follow other related articles on the PHP Chinese website!