fullpage.js学习笔记

最新推荐文章于 2024-03-19 09:34:45 发布

qn_angel

最新推荐文章于 2024-03-19 09:34:45 发布

阅读量640

点赞数 1

分类专栏： jQuery JS JS插件文章标签：插件 jquery

本文链接：https://blog.csdn.net/shy_Angel/article/details/54630688

版权

jQuery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

JS插件

1 篇文章 0 订阅

订阅专栏

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>