dowebok

fullPage.js制作魅蓝note2页面

分类:未分类 日期: 点击(48,774) 评论(10)

fullPage.js制作魅蓝note2页面

演 示 下 载

简介

之前介绍过 jQuery 全屏滚动插件 fullPage.js,很多人都问如何制作类似小米4、小米手环的页面,fullPage.js 主页也没有相关的介绍,所以一直没有做出一个这个这样的例子。其实类似小米4、小米手环这样的页面是他们的工程师自己开发的,或者是借助 jquery.mousewheel.js 等插件实现的,还有的这是通过修改 fullPage.js 实现的,比如魅蓝 note2 就是这样做的,所以理论上我们可以直接拿过来用。

最近在查看最新的 fullPage.js 源代码时(2.7.1),突然发现 “AUTO_HEIGHT” 几个字母,心想:这是自动高度吗?继续往下读后发现,原来 fullPage.js 真的可以实现自动高度,不知为何作者没在主页上提到。不过在测试的时候发现了一个 bug:当第一个 section 是自动高度时,往下滚动后,就不能再滚回第一个了。我们来修改一下,找到 1215 行的代码,如下:

var dtop = element.hasClass(AUTO_HEIGHT) ? (dest.top - windowsHeight + element.height()) : dest.top;

修改成:

var dtop=element.hasClass(AUTO_HEIGHT)?(dest.top==0?0:dest.top-windowsHeight+element.height()):dest.top;

修改好后,我们就开始制作魅蓝 note2 页面。

浏览器兼容

IE Edge Chrome Firefox Opera Safari
IE7+ ✔ Edge ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

制作方法

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 回掉函数用于处理二级导航的显示和隐藏。

到这里就做完了,效果和魅蓝 note2 官方页面并不是一模一样,这里主要是讲方法。

演 示 下 载

标签:

相关文章

发表评论