fullPage.js – jQuery全屏滚动插件

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站

使用方法查看：

http://www.dowebok.com/77.html
https://github.com/alvarotrigo/fullPage.js

dome1:基础

    

        
第一屏
        
fullPage.js — 基本演示
    
    

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

        
第三屏
    
    

        
第四屏
        
这是最后一屏
    

dome2:背景图片

#style
.section1 { background: url(images/1.jpg) 50%;}
.section2 { background: url(images/2.jpg) 50%;}
.section3 { background: url(images/3.jpg) 50%;}
.section4 { background: url(images/4.jpg) 50%;}
#JS
$(function(){
    $('#dowebok').fullpage();
});
#html

    

    

    

    

dome3:循环

$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        #continuousVertical: true//为true，循环移动
    });
});

dome5: 回调函数

#style
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section2 p { position: relative; left: -120%;} //设置p的位置
.section3 p { position: relative; bottom: -120%;}//设置p的位置
.section4 p { display: none;}//先隐藏
#JS
$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
                //滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
        afterLoad: function(anchorLink, index){
            if(index == 2){
                $('.section2').find('p').delay(500).animate({
                    left: '0'
                }, 1500, 'easeOutExpo');
            }
            if(index == 3){
                $('.section3').find('p').delay(500).animate({
                    bottom: '0'
                }, 1500, 'easeOutExpo');
            }
            if(index == 4){
                $('.section4').find('p').fadeIn(2000);
            }
        },
        onLeave: function(index, direction){
            if(index == '2'){
                $('.section2').find('p').delay(500).animate({
                    left: '-120%'
                }, 1500, 'easeOutExpo');
            }
            if(index == '3'){
                $('.section3').find('p').delay(500).animate({
                    bottom: '-120%'
                }, 1500, 'easeOutExpo');
            }
            if(index == '4'){
                $('.section4').find('p').fadeOut(2000);
            }
        }
    });
});
#html

    

        
第一屏
        
fullPage.js — 回调函数演示
    
    

        
第二屏
        
滚动到第二屏后的回调函数执行的效果
    
    

        
第三屏
        
滚动到第三屏后的回调函数执行的效果
    
    

        
第四屏
        
滚动到第四屏后的回调函数执行的效果
    

执行回调方法的动画样式Easing属性 的效果

https://matthewlein.com/experiments/easing.html

dome5:菜单的使用

#style   // 菜单样式要自己定义
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
#JS
$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        anchors: ['page1', 'page2', 'page3', 'page4'],    //对应的屏与对应的描点绑定
        menu: '#menu'    //与菜单的id绑定
    });
});
#html

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


    

        
第一屏
        
fullPage.js — 绑定菜单演示
    
    

        
第二屏
        
请查看左上角，点击可以控制
    
    

        
第三屏
        
绑定的菜单没有默认的样式，你需要自行编写
    
    

        
第四屏
        
这是最后一屏
    

dome6:项目导航

$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        'navigation': true,
        'navigationPosition':'left',
        'navigationTooltips':['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']//项目导航的 tip
    });
});

dome7:自动滚动

$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        continuousVertical: true   //循环
    });
    setInterval(function(){
        $.fn.fullpage.moveSectionDown();
    }, 3000);
});

方法的使用

方法名称 说明
$.fn.fullpage.moveSectionUp() 向上滚动
$.fn.fullpage.moveSectionDown() 向下滚动
$.fn.fullpage.moveTo(section, slide) 滚动到
$.fn.fullpage.moveSlideRight() slide 向右滚动
$.fn.fullpage.moveSlideLeft() slide 向左滚动
$.fn.fullpage.setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动
$.fn.fullpage.setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
$.fn.fullpage.setKeyboardScrolling() 添加或删除键盘方向键控制
$.fn.fullpage.setScrollingSpeed() 定义以毫秒为单位的滚动速度

dome8:slide自动滚动

$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        loopBottom: true    //到底部时回到顶部
    });

    setInterval(function(){
        $.fn.fullpage.moveSlideRight();
    }, 3000);
});

dome9:响应式

如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条

$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
    });

    $(window).resize(function(){
        autoScrolling();
    });

    function autoScrolling(){
        var $ww = $(window).width();
        if($ww < 1024){
            $.fn.fullpage.setAutoScrolling(false);
        } else {
            $.fn.fullpage.setAutoScrolling(true);
        }
    }
    autoScrolling();
});