jQuery+fullPage.js制作网易邮箱大师页面滚动效果

收藏

最新的邮箱大师使用了 flash，并且滚动后 flash 会重新播放，风格比较特别。今天阿豆 就再用 fullPage.js 来制作演示这个页面吧。

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

查看演示

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

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

HTML

<div id="erdangjiade-Wrap">
    <div class="section">
        <div id="cnt1">123</div>
    </div>
    <div class="section">
        <div id="cnt2">abc</div>
    </div>
    <div class="section">
        <div id="cnt3"></div>
    </div>
    <div class="section">
        <div id="cnt4"></div>
    </div>
    <div class="section">
        <div id="cnt5"></div>
    </div>
    <div class="section section6">
    </div>
</div>

引入jQuery和fullpage相关组件:

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="jquery.js"></script>
<script src="js/swfobject.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

Flash

var l = "i10/swf/1.swf?t=" + new Date().getTime(), j = "i10/swf/2.swf?t=" + new Date().getTime(), h = "i10/swf/3.swf?t=" + new Date().getTime(), g = "i10/swf/4.swf?t=" + new Date().getTime(), d = "i10/swf/5.swf?t=" + new Date().getTime(); var e = 1; var f = {}; var i = { wmode: "opaque" }; var b = "100%", q = "100%", n = "9.0.0", p = "i10/swf/expressInstall.swf"; var k = {}; swfobject.embedSWF(l, "cnt1", b, q, n, p, f, i, k, function(a) {}); swfobject.embedSWF(j, "cnt2", b, q, n, p, f, i, k, function() {}); swfobject.embedSWF(h, "cnt3", b, q, n, p, f, i, k, function() {}); swfobject.embedSWF(g, "cnt4", b, q, n, p, f, i, k, function() {}); swfobject.embedSWF(d, "cnt5", b, q, n, p, f, i, k, function() {});

jQuery

使用 fullPage.js 处理页面，并在 onLeave 和 afterLoad 方法里给相应的对象加上 ntfocus() 和 ntunfocus() 方法，使页面滚动时 flash 可以重新播放：

$("#dowebok-Wrap").fullpage({ verticalCentered: false, navigation: true, navigationTooltips: ["1", "2", "3", "4", "5", "6"], afterLoad: function(anchorLink, index){ if(index != 6){ swfobject.getObjectById("cnt" + index).ntfocus(); } if (isIE6){ $("#fp-nav li a").css("background-position", "-15px 0"); $("#fp-nav li a.active").css("background-position", "0 0"); DD_belatedPNG.fix("#fp-nav li a"); } }, onLeave: function(index, nextIndex, direction){ if(nextIndex == 6){ return false; } swfobject.getObjectById("cnt" + nextIndex).ntunfocus(); } });

提示：下载本站的所有页面，不要直接打开，请用localhost或www.域名作为路径，不然少些演示会有报错。