fullpage.js滚屏效果插件案例

制作方法

1、引入文件

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

2、HTML

<div class="ml-nav">
    <div class="center-wrap clearfix">
        <h2 class="ml-logo">魅蓝note2</h2>
        <p class="ml-link">
            <a href="javascript:">概述</a>
            <a href="javascript:">参数</a>
            <a href="javascript:">图库</a>
            <a href="javascript:">机型比较</a>
            <a href="javascript:">意外险</a>
        </p>
        <a class="buy-now" href="javascript:">立即购买</a>
    </div>
</div>

<div id="dowebok">
    <div class="section header fp-auto-height">
        <div class="center-wrap clearfix">
            <h1 class="meizu-logo"><a href="javascript:">MEIZU</a></h1>
            <ul class="nav">
                <li><a href="javascript:">在线商店</a></li>
                <li><a href="javascript:">产品</a></li>
                <li><a href="javascript:">专卖店</a></li>
                <li><a href="javascript:">Flyme</a></li>
                <li><a href="javascript:">服务</a></li>
                <li><a href="javascript:">社区</a></li>
            </ul>
            <div class="login">
                <a href="javascript:">注册</a>|<a href="javascript:">登陆</a>
            </div>
        </div>
    </div>

    <div class="section banner active">
        <div class="center-wrap">
            <div class="desc banner-desc">
                <h1>青年良品</h1>
                <p>追求极致，轻易不说完美&mdash;&mdash;半年时间内，我们便更新了魅蓝 note2。它从各个方面都更进一步；
无论是 R 角弧线、还是更佳的相机算法、甚或是全新的 mBack 键……如此多的改进，只为给你一台更加完美的「青年良品」。</p>
            </div>
        </div>
    </div>

    ...

    <div class="section footer fp-auto-height"></div>
</div>

最上面的 div.ml-nav 是二级导航，不用管它。div#dowebok 内才是滚屏内容，第一个 section 是头部，最后一个是底部，我们希望它们高度自动，所以加 fp-auto-height 的 class，另外魅蓝 note2 默认是显示“第二屏”，所以我们给第二个 section 加上 active 的 class。

3、CSS

#fp-nav ul li:first-child, #fp-nav ul li:last-child { display: none;}

@media screen and (min-width:1920px) {
    .banner { background: url(../images/bg1.jpg) center 0 no-repeat;}
    .thin { background: url(../images/bg2.jpg) center 0 no-repeat;}
    .cnc { background: url(../images/bg3.jpg) center 0 no-repeat;}
    .screen { background: url(../images/bg4.jpg) center 0 no-repeat;}
    .cpu { background: url(../images/bg5.jpg) center 0 no-repeat;}
    .camera { background: url(../images/bg7.jpg) center 0 no-repeat;}
    .flyme { background: url(../images/bg9.jpg) center 0 no-repeat;}
    ...
}
@media screen and (max-width:1440px) {
    .cnc { background: url(../images/bg3-xs.jpg) center 0 no-repeat;}
}

CSS 没有什么特别的，多了一些 CSS3 媒体查询。另外，魅蓝 note2 隐藏了右边圆点导航的第一个和最后一个，即头部和底部的导航，我们也照做吧，如上面第一行 CSS 代码。

4、JavaScript

$(function(){
    var $mlNav = $('.ml-nav');
    $('#dowebok').fullpage({
        verticalCentered: !1,
        navigation: !0,
        onLeave: function(index, nextIndex, direction){
            if(index == 2 && direction == 'up'){
                $mlNav.animate({
                    top: 80
                }, 680);
            } else if(index == 1 && direction == 'down') {
                $mlNav.animate({
                    top: 0
                }, 400);
            } else if(index == 3 && direction == 'up') {
                $mlNav.animate({
                    top: 0
                }, 500);
            } else {
                $mlNav.animate({
                    top: -66
                }, 400);
            }
        }
    });
});

JavaScript 也没什么特别的，只是加了 onLeave 回掉函数用于处理二级导航的显示和隐藏。