全屏滚动插件fullPage课程详解

【前言】

   之前介绍了全屏滚动插件 fullPage.js，也用该插件制作了一些例子。今天介绍另一款全屏滚动组件，名字也叫 fullpage，只是少了 “.js”

【对比】

fullPage.js与fullPage对比：

      与 fullPage.js 相比，fullpage 不依赖任何 js 库，可独立使用。功能上虽然不如 fullPage.js 强大，但一般使用已经足够了，尤其是它的动画效果，你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动

【详解】

一、下载代码

在 https://github.com/powy1993/fullpage 下载源代码

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,  maximum-scale=1, user-scalable=no">

2、引入 fullPage.min.js 文件。

<script src="http://www.dowebok.com/fullPage.min.js"></script>

三、写出你要分几屏的html结构，并配上样式

1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分2屏，如下：

<div id="pageContain">    <div class="page page1 current">        <div class="contain">            <p class="txt">第一屏</p>        </div>    </div>    <div class="page page2">        <div class="contain">            <p class="txt">第二屏</p>        </div>    </div></div>

 2、为这个结构配上样式，如下:

#pageContain { overflow: hidden; }.page { display: none; overflow: hidden; position: absolute; top: 0; left: 0;        width: 100%; height: 100%; max-width:76.8rem; }.contain { display: none; position: relative; z-index: 0; width: 100%; height: 100%; }.current .contain,.slide .contain { display: block; }.current { display: block; z-index: 1; }.slide { display: block; z-index: 2; }.swipe { display: block; z-index: 3; transition-duration: 0ms !important;          -webkit-transition-duration: 0ms !important; }#navBar { display:none;}

四、写入JavaScript启动代码

<script>$(window).load(function() {var runPage;runPage = new FullPage({    id : 'pageContain',                            // id of contain    slideTime : 800,                               // time of slide    continuous : false,                            // create an infinite feel with no endpoints    effect : {                                     // slide effect            transform : {                translate : 'Y',                   // 'X'|'Y'|'XY'|'none'                scale : [.1, 1],                   // [scalefrom, scaleto]                rotate : [270, 0]                      // [rotatefrom, rotateto]            },            opacity : [0, 1]                       // [opacityfrom, opacityto]        },                               mode : 'wheel,touch,nav:navBar',               // mode of fullpage    easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];});});</script>

如果不用jquery，可以用js的写法代替$选择符：window.onload=function(){｝

最后提醒一下，一定不要忘记写上分页导航列表，缺少这个列表就不起作用了，可以用样式隐藏它

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

.