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

来源:https://www.sucaihuo.com/js/172.html 2015-06-11 07:24浏览(3441) 收藏

最新的邮箱大师使用了 flash,并且滚动后 flash 会重新播放,风格比较特别。今天阿豆 就再用 fullPage.js 来制作演示这个页面吧。
jQuery+fullPage.js制作网易邮箱大师页面滚动效果
分类:其它特效 > 页面滚动 难易:中级
查看演示 下载资源 下载积分: 20 积分

HTML

<div id="sucaihuo-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.域名作为路径,不然少些演示会有报错。

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2