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 页面。
浏览器兼容
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 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>追求极致，轻易不说完美——半年时间内，我们便更新了魅蓝 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 官方页面并不是一模一样，这里主要是讲方法。
