码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-18 10:39:26      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:jquery插件

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

一、fullPage.js实现全屏

     fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js

    1、基本演示

           1.1  引入文件

<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<!-- fullpage.js依赖于jquery库 -->
<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并不是给元素设置样式的,元素的样式需要自己写

<style type="text/css">
        body
        {
            color: #FFFFFF;
        }
        .section1
        {
            background-color: #BFDA00;
        }
        .section2
        {
            background-color: #2EBE21;
        }
        .section3
        {
            background-color: #2C3E50;
        }
        .section4
        {
            background-color: #FF9900;
        }
    </style>

          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:

<script type="text/javascript">
    $(function() {
        $("#ido").fullpage();
    });
</script>

    效果: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

        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  (滚动到5和6屏)

       
        1.7  循环演示:continuousVertical设置为true
$(function() {
    $("#ido").fullpage(
        {
            continuousVertical: true
        });
});

      效果:http://denon-7c931.coding.io/xhfull.html (滚动到第6屏,再向下滚动时自动回到第一屏)

        1.8 绑定菜单:添加菜单项

<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>

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

         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 (导航在右侧)

  

    2、配置如图

技术分享

如果需要配置easing和scrollOverflow,则需要引入额外的js(在vendors目录下)

<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<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

    1、基本演示

<!-- 引入js -->
<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

<div id="pageContain"> <div class="page page1 current"> <div class="contain"> <h1 class="txt">第一屏</h1> </div> </div> <div class="page page2"> <div class="contain"> <h1 class="txt">第二屏</h1> </div> </div> <div class="page page3"> <div class="contain"> <h1 class="txt">第三屏</h1> </div> </div> <div class="page page4"> <div class="contain"> <h1 class="txt">第四屏</h1> </div> </div> <div class="page page5"> <div class="contain"> <h1 class="txt">第五屏</h1> </div> </div> </div>

<ul id="navBar">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li> </ul>

js

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

 
    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);
 
 
 

2、配置如图

技术分享

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

标签:jquery插件

原文地址:http://blog.csdn.net/u011043843/article/details/44402961

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!