博客

Fullpage.js 框架

fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。

一、fullPage.js实现全屏

fullPage.js是开源的JQuery插件库，其Github地址：

点击打开链接

。

1、基本演示

 <!--引入Fullpage.css文件-->
    <link rel="stylesheet" href="css/jquery.fullPage.css">

<!--引入jq库，Fullpage.js依赖与jq库-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

1.2  css：引入的css并不是给元素设置样式的，元素的样式需要自己写

  #fullpage{
            text-align: center;
        }
        .section{
            background: #658CF0;
        }
        .section1{
            background: #666666;
        }
        .section2{
            background: #999999;
        }

1.3  html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第二屏显示

<div id="fullpage">
    <div class="section section1">第一屏</div>
    <div class="section section2 active">第二屏</div>
       <div class="section section3"> 
       <div class="slide">第三屏的第一屏</div>
       <div class="slide">第三屏的第二屏</div> 
       <div class="slide">第三屏的第三屏</div> 
       <div class="slide">第三屏的第四屏</div>
     </div> 
     <div class="section section4">第四屏</div>
</div>

1.4  js:

 $(function(){
        $("#fullpage").fullpage({
        });
    })

1.5

可以在某屏中再添加子滚动屏，借助slide类。修改上述第三个section如下：

 <div class="section section3">
        <h1 class="slide">第二屏的第一屏</h1>
        <h1 class="slide">第二屏的第二屏</h1>
        <h1 class="slide">第二屏的第三屏</h1>
        <h1 class="slide">第二屏的第四屏</h1>
    </div>

设置最后一屏自定义高度

要设置的屏上加 fp-height-auto类，设置自己想要的高度就可以。

二、fullPage.js

绑定菜单：添加菜单项

2.1 添加菜单项

<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">第5屏</a></li>
    <li data-menuanchor="page6"><a href="#page6">第6屏</a></li>
</ul>

2.2 添加css

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

2.4 添加js

 $(function(){
        $("#fullpage").fullpage({
//            continuousVertical: true,  //循环演示
//            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90','#ddfccc'], //设置颜色参数                            //绑定菜单
            anchors: ['page1', 'page2', 'page3', 'page4','page5','footer'],//设置控制
            menu: '#menu',//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
          

        });
    })

2.5 导航演示

 $(function(){
        $("#fullpage").fullpage({
//            continuousVertical: true,  //循环演示
//            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90','#ddfccc'], //设置颜色参数                            //绑定菜单
            anchors: ['page1', 'page2', 'page3', 'page4','page5','footer'],//设置控制
            menu: '#menu',//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
            'navigation': true //导航设置

        });
    })