Fullpage.js 框架种种

蔚落 2022-05-28 08:43 170阅读 0赞

##  Fullpage.js 框架 ##

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

一、fullPage.js实现全屏

fullPage.js是开源的JQuery插件库，其Github地址：[点击打开链接][Link 1]。

> 1、基本演示
> 
>     
>         <link rel="stylesheet" href="css/jquery.fullPage.css">
> 
>     
>     <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 添加菜单项

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 导航演示

[Link 1]: https://github.com/alvarotrigo/fullPage.js