fullPage.js魅蓝滚动加载手机产品介绍图

收藏

魅蓝撩妹手机产品展示页面，支持鼠标滚动加载，导航点击切换对应页面

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

导航菜单

<div class="section header fp-auto-height">
    <div class="center-wrap clearfix">
        <h1 class="meizu-logo"><a href="http://www.erdangjiade.com/">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 net">
    <div class="center-wrap">
        <div class="desc net-desc">
            <h1>五模十三频 双 4G 双卡双待</h1>
            <p>不再受限硬件，支持 TD-LTE 与 FDD-LTE 双 4G 制式，无缝切换中国移动中国联通。单卡槽双 Nano-SIM 卡位简洁机身设计，主卡位还可复用兼容最大 128GB 内存卡扩展。<br>*公开版可支持中国移动中国联通双 4G</p>
        </div>
    </div>
    <div class="net-img">
        <img alt="net" src="images/card.jpg" style="opacity: 1;">
        <img alt="" src="images/cc-a.png" class="cc cc1" style="opacity: 1;">
        <img alt="" src="images/cc-b.png" class="cc cc2" style="opacity: 0;">
    </div>
</div>

<div class="section camera">
    <div class="center-wrap">
        <div class="desc camera-desc">
            <h1>1300 万像素主摄像头<br>双色温双闪光灯</h1>
            <p>魅蓝 note2 主摄像头沿用专业的三星 1300 万像素 CMOS，成像锐利细节丰富。双色温双闪光灯，暗光环境下白平衡精准自然。零延时快门拍照，生活每一瞬息皆为永恒。前置 500 万像素配合升级过的 FotoNation 智能美颜算法，按下快门的瞬间，系统即可完成美肤调亮，静待分享社交圈。</p>
        </div>
    </div>
</div>

<div class="section battery">
    <div class="center-wrap">
        <div class="desc battery-desc">
            <h1>3100mAh 典型容量<br>SONY 等电芯</h1>
            <p>电池典型值容量为 3100mAh，在同等价位实属少见。采购高成本的 SONY/ATL 等电芯，只因安全耐用。</p>
        </div>
    </div>
    <div class="battery-img">
        <img alt="battery" src="images/bbb.png">
    </div>
</div>

引入fullPage页面滚动加载插件

<script src="js/jquery.fullPage.js"></script>

var $mlNav = $('.ml-nav');
$('#erdangjiade').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);
        }
    }
});