FullPage.js全屏滚动插件解说

时间 2019-11-13

标签 fullpage.js fullpage 全屏滚动插件解说栏目 JavaScript 繁體版

原文原文链接

1.主要功能

1）.支持鼠标滚动
2）.多个回调函数
3）.支持手机、平板触屏事件
4）.支持css3动画
5）.支持窗口缩放
6）.窗口缩放时自动调整
7）.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等javascript

2.结构

使用HTML代码第一行上的强制HTML DOCTYPE声明启动HTML文档。不然，你可能会遇到段高的问题。提供的示例使用HTML 5 doctype <!DOCTYPE html>。

css

3.配置

1).sectionColor:
能够为每个section设置background-color属性。
例如：
　　　　$('#fullpage').fullpage({ 　　　　sectionColor: ['green','orange','gray','red']; 　　　　});

2).controlArrows
定义是否经过箭头来控制slide幻灯片，默认为true。当咱们设置为false，则幻灯片左右两侧的的箭头就会消失，在移动设备上，能够经过滑动来操做幻灯片。

3)controlArrowColor

4).verticalCentered:
　　　每一页的内容是否垂直居中，默认为true。通常咱们保持默认值
5).resize:
　　字体是否随着窗口缩放而缩放，默认为false
6).scrollingSpeed:
　　滚动速度，单位为毫秒，默认为700html

7).anchors:
　　定义锚连接，默认值为[]。有了锚连接，用户就能够快速打开定位到某一页面。
　　　注意定义锚连接的时候，值不要和页面中任意id或name相同，尤为是在IE浏览器下，并且定义时不须要加#
menu
　绑定菜单，设定的相关属性与anchors的值对应后，菜单能够控制滚动，默认为false。能够设置为菜单的jquery选择器java

8).lockAnchors:
　　　是否锁定锚连接，默认为false。若是设置为true，那么定义的锚连接，也就是anchors属性则没有效果，这个配置项使用比较少
9).active：
　　　　在页面中为某一个section添加了active以后，默认当窗口打开时会定位到此active，显示当前页
10).easing:
　　　　　定义页面section滚动的动画方式，默认为easeInOutCubic，若是修改此项，须要引入jquery。easings插件，或者jquery ui。
11).css3:
　　　　是否使用css3 transforms来实现滚动效果，默认为true。这个配置项能够提升支持css3的浏览器，好比移动设备等的速度，若是浏览器不支持css3，则会使用jquery来替代css3实现滚动效果。即优雅降级，使用jquery实现动画，通常来讲，它的性能不如css动画来得快。
12).navigation: true,
右侧的原点导航按钮显示与否，默认不显示，为true显示原点按钮
注意：按钮样式要修饰下，实在是太丑啦，好伤眼！！！！

13).navigationTooltips:
导航小圆点的tooltips设置鼠标通过时显示的名字，默认为[]，注意按照顺序设置。
navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能']

14).navigationPosition
项目导航的位置，可选 left 或 right,默认为right
navigationPosition:"left"

15.navigationColor
项目导航的颜色
不起做用
16).slidesNavigation
是否显示左右滑块的项目导航，默认值为false
咱们能够利用这样设置左右滑动的带原点的项目
额，样式也要改下，真伤眼
slidesNavigation:"true"

17).slidesNavPosition
左右滑块的项目导航的位置，可选 top 或 bottom,默认为bottom
slidesNavPosition:"top"

18).loopTop:
滚动到最顶部后是否连续滚动到底部，默认为false。
loopTop:"true"
滚到第一屏向上滚会回最后一屏
19).loopBottom：
滚动到最底部后是否连续滚动回顶部，默认为false。
loopBottom:"true"
滚到最后一屏向下滚会回第一屏
20).loopHorizontal：
横向slider幻灯片是否循环滚动，默认为true。设置为false时，在第一个slider时，没有向左滚动的箭头，不能向左滚动。同理，最后一个slider时，没有向右滚动的箭头，不能向右滚动。
21).autoScrolling：
　　　　是否使用插件的滚动方式，默认为true，若是选择false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来滚动。
22).scrollBar：
　　　　是否包含滚动条，默认为false，若是设置为true，则浏览器自带的滚动条出现，页面滚动时仍是按页滚动，可是滚动条的默认行为也有效。
23).paddingTop/paddingBottom：
　　　　设置每个section顶部和底部的padding，默认都为0.通常若是咱们须要设置一个固定在顶部或者底部的菜单、导航、元素等，能够使用这两个配置项。
24).fixedElements：
　　　　固定的元素，默认为null，须要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不动。
25).keyboardScrolling：
　是否能够使用键盘方向键导航，默认为true。
26).touchSensitivity：
　在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100，越大则越难滑动。
27).continuousVertical:
　　　　是否循环滚动，默认为false。若是设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时设置。
28).animateAnchor：
　　　　锚连接是否能够控制滚动动画，默认为true。若是设置为false，则经过锚连接定位到某个页面显示再也不有动画效果。
29).recordHistory:
　　　　是否记录历史，默认为true，能够记录页面滚动的历史，经过浏览器的前进后退来导航。注意若是设置了autoScrolling：false，那么这个配置也将被关闭，即设置为false。
30).showActiveTooltip：
　　　　是否显示当前页面的导航的tooltip信息，默认为false
showActiveTooltip:"true"

31).scrollOverflow：
　　　　内容超过满屏后是否显示滚动条，默认为false。若是设置为true，则会显示滚动条，若是要滚动查看内容，还须要jquery.slimscroll插件的配合。
32).slimscroll：
插件主要用于模拟传统的浏览器滚动条。
33).sectionSelector：
　section的选择器，默认为.section。
34).slideSelector：
　　　　slide的选择器，默认为.slide。jquery

4.fullPage支持延迟加载图片和视频（Lazy Loading）

1.图片：
<img daye-src="image.png">
2.视频：
　<video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> 　</video>css3

5.demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<style>
     .slide{text-align: center;}
        #fp-nav ul li, .fp-slidesNav ul li {
            width: 90px;
            height: 21px;
            margin: 10px 0 0;
            vertical-align: middle;
        }
        #fp-nav ul li a, .fp-slidesNav ul li a {
            float: right;
            width: 21px;
            height: 21px;
            color: #8F9DA4;
            text-align: right;
        }
        #fp-nav ul li a span, .fp-slidesNav ul li a span{
            height: 12px;
            width: 12px;
            border:2px solid #fff;
            background: rgba(0, 0, 0, 0);
        }
        #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
            width: 12px;
            height: 12px;
            margin: -2px 0 0 -2px;
        }
        #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{
             margin: -2px 0 0 -2px;
             background: #fff;
        }
        #fp-nav ul li .fp-tooltip.right{
            float: left;
            top: 5px;
            margin-right: 5px;
            font: 12px "Microsoft Yahei";
            line-height: 21px;
        }
        /*水平导航*/
        .fp-slidesNav ul li {
                   width: 14px;
                    height: 21px;
                    margin-left: 10px;
                    vertical-align: middle;
        }
</style>
</head>
<body>
<div id="fullpage">
    <div class="section">
        1
    </div>
    <div class="section">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
        <div class="slide">5</div>
        <div class="slide">6</div>
    </div>
    <div class="section">
        3
    </div>
    <div class="section">
        4
    </div>
    <div class="section">
        5
    </div>
    <div class="section">
        5
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#fullpage").fullpage({
            sectionsColor:['#ff7a8a', '#336699', '#993366','#336699','#46c8af','#EA6153'],
            navigation:true,
            navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件'],
            navigationPosition:"right",
            controlArrows:false,
            slidesNavigation:true,
            slidesNavPosition:"bottom",
            showActiveTooltip:true,
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        });
    });
</script> 
</body>
</html>

另外多说几句，关于单页中的图片与文字的动画效果
基本上就是一张背景图+几张图片+文字
关键点：
进入可视区域时，标题部分字体缩放比例变化透明度变化，两边加载文字和图片的方向不一样
本文为原创，转载请注明地址，谢谢
本文地址：http://www.cnblogs.com/wanghuih/p/6520498.htmlweb