1、引入Javascript,CSS依赖
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/style.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>
<!--fullpage示例开始-->
<div id="fullpageWrapper">
<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>
<!--fullpage示例结束-->
最上面的 div.ml-nav 是二级导航,不用管它。div#fullpageWrapper 内才是滚屏示例内容,第一个 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');
$('#fullpageWrapper').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 回掉函数用于处理二级导航的显示和隐藏。更多关于fullpage.js用法请参考官网:https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs
到这里基于fullPagejs炫酷的魅蓝 note2 全屏网站示例就做完了。
the end