最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-06-11 07:24浏览(1596)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery+fullPage.js制作网易邮箱大师页面滚动效果
分类:其它特效 > 页面滚动 难易:中级
查看演示 下载资源: 116

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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.域名作为路径,不然少些演示会有报错。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/172.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    03-05 08:25
    ngu137
    特效好看实用。。。
1 2