How the Fullpage plug-in quickly develops a full-screen page turning effect page-JS Tutorial-php.cn

This article will analyze how to use the Fullpage plug-in to quickly develop full-screen flipping pages. It is suitable for major websites. This function is very advanced. Let’s follow the editor of Script House to see how the Fullpage plug-in achieves this effect.

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

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

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  //fullpage插件  //滚动条插件  //fullpage.css

Copy after login

2. Page structure

第一页

第二页

第三页

第四页

Copy after login

3. If we need to have a slideshow effect in one page, the structure is as follows

第一张幻灯片

Copy after login

This is our simple page The layout is complete, now you only need to use the api structure of the plug-in

4. The format and usage of the plug-in:

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

Copy after login

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:

Copy after login

The above is the detailed content of How the Fullpage plug-in quickly develops a full-screen page turning effect page. For more information, please follow other related articles on the PHP Chinese website!