转载

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

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>

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、配置如图

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

如果需要配置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、基本演示

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>

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

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

效果： http://denon-7c931.coding.io/fullauto.html