H5插件 fullpage全屏滚动插件使用帮助

H5,css3 为我们提供了很多强大的功能,我觉得最为突出就是,通过Css3的一个动画效果,为我们在js中节省了很多代码,和时间。本次我向大家介绍一个好用的小插件,实现全屏滚动的 fullpage

1、插件下载地址

我这里已经为大家准备好的我之前使用的版本  

注意: 因为fullpage是基于jquery的 所以需要jquery.js. 我已经打包好地址在下
三个文件 一个js 一个css 一个jq

链接:https://pan.baidu.com/s/1AnvKMbUlWQMWXlqJ_wpKww 提取码:f0mx

2、引入依赖包

  这里注意在引入时先引入jq  ,在引入我们的fullpage

3、我们在自建js文件中引入

我们基于此段代码进行填充

					 $(function(){
                         $('#dowebok').fullpage();
                     });

4、在html中搭建此结构


 
第一屏
第二屏
第三屏的第一屏
第三屏的第二屏
第三屏的第三屏
第三屏的第四屏
第四屏

5、我整理的fullpage常用方法

 $('.dowebok').fullpage({
        /*背景颜色配置参数 有多少屏我们可以加入自己喜欢的颜色*/
        sectionsColor: ["#fadd67", "#84a2d4", "#ef674d"],
        /*是否允许内容居中,默认是true*/
        verticalCentered: false,
        /*这个是右边的一个点型导航栏,fullpage自带的默认不打开*/
        navigation: true,
        /*当进入某一屏时触发,我这里给他触发加入的是now类*/
        afterLoad:function (link,index) {
            /*index 序号 1开始  当前屏的序号*/
            $('.section').eq(index-1).addClass('now');
        },
        /*离开某一个页面的时候触发,我加入的是leaved类   index当前页  nextIndex下一页*/
        onLeave:function (index,nextIndex,direction) {
            if(index == 2 && nextIndex == 3){
                /*当前是从第二页到第三页*/
                $('.section').eq(index-1).addClass('leaved');
            }
        },
        /*页面切换的时间 默认是700mm*/
        scrollingSpeed:1000
    });
本人也是对此浅显研究了一下,如果有更好的,或者有别的建议可以加我QQ2607143474,大家一起探讨技术

你可能感兴趣的:(H5插件 fullpage全屏滚动插件使用帮助)