jquery.fullpage.js网易邮箱大师专题页面滚动动画展示代码



159 635 212



特效描述:页面滚动 动画展示,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">

2. 引入JS

<script src="js/DD_belatedPNG.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swfobject.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

3. HTML代码

<div id="Wrap">
	<div class="section">
		<ul class="logos">
			<li class="item-l"><a href="http://www.17sucai.com/" hidefocus="true" class="logo logo-mail163" target="_blank"></a></li>
			<li class="item-l"><a href="javascript:;" hidefocus="true" class="logo logo-mail126"></a></li>
			<li class="item-l"><a href="javascript:;" hidefocus="true" class="logo logo-mailyeah"></a></li>
			<li class="item-r"><a href="javascript:;" hidefocus="true" class="logo logo-mailapp"></a></li>
		</ul>
		<div id="cnt1"></div>
	</div>
	<div class="section">
		<div id="cnt2"></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 class="m-dz">
			<div class="tip"> <span class="icon"></span> <span class="txt">喜欢它,请毫不吝啬【为它点赞】</span> </div>
			<div class="prize"></div>
			<div class="act"> <a href="javascript:;"  class="link js-rule"><span class="txt">点此刷好评 免费送旅行箱</span></a> </div>
		</div>
		<div class="m-ft">
			<div class="cp">网易邮箱出品</div>
			<div class="footer"><a href="http://www.17sucai.com/" target="_blank">关于我们</a><a href="javascript:;">关于网易免费邮</a><a href="javascript:;">邮箱官方博客</a><a href="javascript:;">客户服务</a><a href="javascript:;">隐私政策</a><span class="copyright"><span class="line">|</span>网易公司版权所有</span> </div>
		</div>
	</div>
</div>
<script>
var isIE6 = false;
</script> 
<!--[if IE 6]>
<script>
DD_belatedPNG.fix('#fp-nav li a');
DD_belatedPNG.fix('.logos a');
isIE6 = true;
</script>
<![endif]--> 
<script>
$(function(){
	$("#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 a").css("background-position", "-15px 0");
				$("#fp-nav .active").css("background-position", "0 0");
				DD_belatedPNG.fix("#fp-nav a");
			}
		},
		onLeave: function(index, nextIndex, direction){
			if(nextIndex == 6){
				return false;
			}
			swfobject.getObjectById("cnt" + nextIndex).ntunfocus();
		}
	});
	//载入 flash
	var l = "swf/1.swf?t=" + new Date().getTime(),
		j = "swf/2.swf?t=" + new Date().getTime(),
		h = "swf/3.swf?t=" + new Date().getTime(),
		g = "swf/4.swf?t=" + new Date().getTime(),
		d = "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 = "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() {});
	setTimeout(function(){
		$('.section6').css('visibility', 'visible');
	}, 2000);
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 图片滚动 图片滚动条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到