fullpage.js学习笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shy_Angel/article/details/54630688

1. fullpage.js是什么

起源 偶尔开到一些美观酷炫的网站,查看源码,发现了都使用了fullpage.js这个插件,如墨刀官网、搜狗拼音输入法Mac版首页等。
简介 这是一个基于jQuery的全屏滚动插件,可以实现非常酷炫的全屏滚动特效。特别简单、易用。主要功能:

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持CSS3动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动高度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

兼容性 jQuery1.7+;多数浏览器(包括IE8+)

2. 开始编程

2.1 引入文件(css、js)
<link rel="stylesheet" type="text/css" href="styles/jquery.fullpage.min.css">
<script type="text/javascript" src="scripts/component/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="scripts/component/jquery.fullpage.min.js"></script>
2.2 body内容
<ul id="menu">
        <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
        <li data-menuanchor="page5"><a href="#page5">第五屏</a></li>
        <li data-menuanchor="page6"><a href="#page6">第六屏</a></li>
    </ul>

    <div id="ido">
        <div class="section section1">
            <h1>每一个section是一屏,这是第一屏</h1>
        </div>
        <div class="section section2">
            <h1>每一个section是一屏,这是第二屏</h1>
        </div>
        <div class="section section3">
            <h1>每一个section是一屏,这是第三屏</h1>
        </div>
        <div class="section section4">
            <h1>每一个section是一屏,这是第四屏</h1>
        </div>
        <div class="section section5">
            <h1>每一个section是一屏,这是第五屏</h1>
        </div>
        <div class="section section6">
            <h1>每一个section是一屏,这是第六屏</h1>
        </div>
    </div>
2.3 css样式
<style type="text/css">
body {
    color: #fff;
}
.section1 {
    background-color: #bfda00;
}
.section2 {
    background-color: #2ebe21;
}
.section3 {
    background-color: #2c3e50;
}
.section4 {
    background-color: #f90;
}
.section5 {
    background-color: #f54;
}
.section6 {
    background: url('images/bg.png');
}

#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;}

</style>

2.4 JavaScript

    <script type="text/javascript">
        $(function(){
            $("#ido").fullpage({
                continuousVertical: true,     //循环演示(从最后一屏滚到开始一屏循环)
                anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'], //绑定菜单
                menu: '#menu',
                navigation: true,            //导航
            });
        });
    </script>

2.5 在浏览器中打开
这里写图片描述

3. 拓展

3.1 fullpage可选配置
  • anchors 数组 无默认值 定义锚链接
  • autoScrolling 布尔值 true 是否使用插件滚动方式
  • animateAnchor 布尔值 true
  • controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
  • CSS3 布尔值 false 是否使用CSS3 transforms滚动
  • continuousVertical 布尔值 false 是否循环滚动
  • easing 字符串 easeInQuart 滚动动画方式
  • fixedElements 字符串 无默认值
  • keyboardScrolling 布尔值 true 是否使用键盘方向导航
  • loopBottom 布尔值 false 滚动到最底部后是否回顶部
  • loopTop 布尔值 false 滚动到最顶后是否滚底部
  • loopHorizontal 布尔值 true 左右滑块是否循环滑动
  • menu 布尔值 false 绑定菜单
  • navigation 布尔值 false 是否显示项目导航
  • navigationPosition 字符串 right 项目导航的位置,可选left或right
  • navigationColor 字符串 #000 项目导航的颜色
  • navigationTooltips 数组 空 项目导航的tip
  • normalScrollElements
  • normalScrollElementTouchThreshold 整数 5
  • paddingTop 字符创 0 与顶部的距离
  • paddingBottom 字符串 0 与底部的距离
  • resize 布尔值 false 字体是否随着窗口缩放而缩放
  • slidesColor 函数 无默认值 设置背景颜色
  • scrollingSpeed 整数 700 滚动速度,单位为毫秒
  • slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
  • slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选top或bottom
  • scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条
  • touchSensitivity 整数 5
  • verticalCentered 字符串 true 内容是否垂直居中
3.2 方法
  • moveSectionUp() 向上滚动
  • moveSectionDown() 向下滚动
  • moveTo(section, slide) 滚动到
  • moveSlideRight() slide向右滚动
  • moveSlideLeft() slide向左滚动
  • setAutoScrolling() 设置页面滚动方式,设置为true时自动滚动
  • setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
  • setKeyboardScrolling() 添加或删除键盘方向键控制
  • setScrollingSpeed() 定义以毫秒为单位的滚动速度
3.3 回调函数
  • afterLoad
  • onLeave
  • afterRender
  • afterSlideLoad
  • onSlideLeave
3.4 相关链接

没有更多推荐了,返回首页