最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-03-05 19:24浏览(1627)

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

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

fullPage.js魅蓝滚动加载手机产品介绍图
分类:导航菜单 > 滚动菜单 难易:中级
查看演示

加我微信,拉你进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);
        }
    }
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/828.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    03-08 14:05
    spartAce
    不知道是不是自适应屏幕的
1 2