全屏滚动实现：fullPage.js和fullPage

悠悠 2022-08-07 06:00 446阅读 0赞

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

**一、fullPage.js实现全屏**

fullPage.js是开源的JQuery插件库，其Github地址：[https://github.com/alvarotrigo/fullPage.js][https_github.com_alvarotrigo_fullPage.js]

**1、基本演示**

1.1  引入文件

<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
    
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>

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

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

<div id="ido">
        <div class="section section1">
            <h1>每一个section是一屏，这是第一屏</h3>
        </div>
        <div class="section section2">
            <h1>每一个section是一屏，这是第二屏</h3>
        </div>
        <div class="section section3 active">
            <h1>每一个section是一屏，这是第三屏</h3>
        </div>
        <div class="section section4">
            <h1>每一个section是一屏，这是第四屏</h3>
        </div>
    </div>

1.4  js:

效果：[http://denon-7c931.coding.io/fullpagejs.html][http_denon-7c931.coding.io_fullpagejs.html]

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

<div class="section section2" style="text-align:center">
                <h1 class="slide">第二屏的第一屏</h1>
                <h1 class="slide">第二屏的第二屏</h1>
                <h1 class="slide">第二屏的第三屏</h1>
                <h1 class="slide">第二屏的第四屏</h1>
    </div>

效果：[http://denon-7c931.coding.io/fullpagejs.html][http_denon-7c931.coding.io_fullpagejs.html]

1.6  添加背景屏，在html添加两个section

<div class="section section5">
        <h1>每一个section是一屏，这是第5屏--图片背景</h3>
    </div>
    <div class="section section6">
        <h1>每一个section是一屏，这是第6屏--图片背景</h3>
    </div>

添加css

.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}
    .section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}

效果：[http://denon-7c931.coding.io/bjfull.html][http_denon-7c931.coding.io_bjfull.html]  （滚动到5和6屏）

1.7  循环演示：continuousVertical设置为true

$(function() {
        $("#ido").fullpage(
            {
                continuousVertical: true
            });
    });

效果：[http://denon-7c931.coding.io/xhfull.html][http_denon-7c931.coding.io_xhfull.html] （滚动到第6屏，再向下滚动时自动回到第一屏）

1.8 绑定菜单：添加菜单项

添加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;}

修改js

$(function() {
                $("#ido").fullpage(
                    {
                        continuousVertical: true,  //循环演示
                            //绑定菜单
                             anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                        menu: '#menu',
    
                    });
            });

效果：[http://denon-7c931.coding.io/memufull.html][http_denon-7c931.coding.io_memufull.html]

1.9  导航演示：设置’navigation': true,

$(function() {
                $("#ido").fullpage(
                    {
                        continuousVertical: true,  //循环演示
                        //绑定菜单
                        anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                        menu: '#menu',
    
                        // 导航
                        'navigation': true,
                    });
            });

效果：[http://denon-7c931.coding.io/navfull.html][http_denon-7c931.coding.io_navfull.html] （导航在右侧）

####     2、配置如图 ####

[![config][]][config 1]

如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）

<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
    
    <script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>

**二、fullPage实现全屏**

fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。其Github地址：[https://github.com/powy1993/fullpage][https_github.com_powy1993_fullpage]

**1、基本演示**

<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>

1.1  垂直滚动

css

body {
          width: 100%;
              *cursor: default;
          overflow: hidden;
          font: 16px/1.5 "Microsoft YaHei";
      }
      div,p {
          margin: 0;
          padding: 0;
      }
      ul {
              list-style: none;
      }
      #pageContain {
          overflow: hidden;
      }
      .page {
          display: none;
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
      }
      .contain {
          width: 100%;
          height: 100%;
          display: none;
          position: relative;
          z-index: 0;
      }
      .current .contain,.slide .contain {
          display: block;
      }
      .current {
          display: block;
          z-index: 1;
      }
      .slide {
          display: block;
          z-index: 2;
      }
      .page1 {
          background: #37c1e3;
      }
      .page2 {
          background: #009922;
      }
      .page3 {
          background: #992211;
      }
      .page4 {
          background: #ff00ff;
      }
      .page5 {
          background: #00ff00;
      }
      .page6 {
          background: #22ffff;
      }
      #navBar {
          z-index: 3;
          position: absolute;
          top: 10%;
          right: 3%;
      }
      #navBar .active {
          background: #ccc;
      }
      #navBar li {
          cursor: pointer;
          margin-bottom: 10px;
          transition: all .7s ease;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
          width: 40px;
          height: 40px;
      }
    h1
     {
         text-align: center;
         margin-top: 20%;
     }

html

var runPage;
    runPage = new FullPage({
        id: 'pageContain',
        slideTime: 800,
        effect: {
            transform: {
                translate: 'Y' //垂直滚动，改为X则是水平滚动
            },
            opacity: [0, 1]
        },
        mode: 'wheel, touch, nav:navBar',
        easing: 'ease'
    });

效果：[http://denon-7c931.coding.io/fullpage.html][http_denon-7c931.coding.io_fullpage.html]

1.2  css3动画：修改js就行

var runPage;
    runPage = new FullPage({
        id: 'pageContain',
        slideTime: 800,
        effect: {
            transform: {
               translate: 'X',
               scale: [0, 1],
        rotate: [270, 0]
            },
            opacity: [0, 1]
        },
        mode: 'wheel, touch, nav:navBar',
        easing: 'ease'
    });

效果：[http://denon-7c931.coding.io/fulldh.html][http_denon-7c931.coding.io_fulldh.html]

1.3  自动滚动，js修改如下

var runPage, interval, autoPlay;
    
        autoPlay = function(to) {
            clearTimeout(interval);
            interval = setTimeout(function() {
                runPage.go(to);
            }, 1000);
        }
        runPage = new FullPage({
            id: 'pageContain',
            slideTime: 800,
            effect: {
                transform: {
                   translate: 'X',
                   scale: [0, 1],
            rotate: [270, 0]
                },
                opacity: [0, 1]
            },
            mode: 'wheel, touch, nav:navBar',
            easing: 'ease',
            callback: function(index, thisPage){
            index = index + 1 > 3 ? 0 : index + 1;
            autoPlay(index);
             }
        });
        interval = setTimeout(function() {
                runPage.go(runPage.thisPage() + 1);
            }, 1000);

效果：[http://denon-7c931.coding.io/fullauto.html][http_denon-7c931.coding.io_fullauto.html]

**2、配置如图**

[![condig][]][condig 1]

[https_github.com_alvarotrigo_fullPage.js]: https://github.com/alvarotrigo/fullPage.js
[http_denon-7c931.coding.io_fullpagejs.html]: http://denon-7c931.coding.io/fullpagejs.html
[http_denon-7c931.coding.io_bjfull.html]: http://denon-7c931.coding.io/bjfull.html
[http_denon-7c931.coding.io_xhfull.html]: http://denon-7c931.coding.io/xhfull.html
[http_denon-7c931.coding.io_memufull.html]: http://denon-7c931.coding.io/memufull.html
[http_denon-7c931.coding.io_navfull.html]: http://denon-7c931.coding.io/navfull.html
[config]: http://www.ido321.com/wp-content/uploads/2015/03/config_thumb.png
[config 1]: http://www.ido321.com/wp-content/uploads/2015/03/config.png
[https_github.com_powy1993_fullpage]: https://github.com/powy1993/fullpage
[http_denon-7c931.coding.io_fullpage.html]: http://denon-7c931.coding.io/fullpage.html
[http_denon-7c931.coding.io_fulldh.html]: http://denon-7c931.coding.io/fulldh.html
[http_denon-7c931.coding.io_fullauto.html]: http://denon-7c931.coding.io/fullauto.html
[condig]: http://www.ido321.com/wp-content/uploads/2015/03/condig_thumb.png
[condig 1]: http://www.ido321.com/wp-content/uploads/2015/03/condig.png