FullPage(插件)

今天说一下一个插件FullPage这个插件，我在很多的网站中都看到了这个插件，尤其是在对某一个产品的介绍中，对于很多人的简历我们也是主要用到了这个插件比如：http://www.songlin123.com/#page1的个人简历中就用到了这个插件效果十分给力，这里我就主要介绍一下这个插件吧。

FullPage插件简介

fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验。
可以实现的功能：

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

插件下载

在网上这个插件很好搜的，很多网站都给出了连接：https://github.com/alvarotrigo/fullPage.js

文件引入

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

这种引入方式很简单一般的插件都是这样引入，只是大家注意一定要先引入jq，之后再引入插件的js。

写html

<div id="fullpage">
        <div class="section">section1</div>
        <div class="section">section2</div>
        <div class="section">section3</div>
        <div class="section">section4</div>
</div>

$(document).ready(function() {
        $('#fullpage').fullpage({

        });
    });

这些就是纵向的切换，这些名字都是给定的不能改，如果我们想给某一个页面加横向的div的切换效果的话也可以，具体代码如下：

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

设置侧边的导航栏：

<ul id="myMenu">
            <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
            <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
            <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
            <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

css:

#myMenu{
    position:fixed;
        ...
}

js:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

这些就是基本的操作，之后可以在里边加一些操作，不过我可以说一下注意的地方，如果做手机适配端有时候会出现页面中的点击事件失效了，此时就要用addEventListener来添加事件，这样就可以保证事件有效，这是我在项目中遇到的问题。