经验分享程序开发文档资料数据资源其它资源

fullPage百度百科史记2013滑动滚动特效代码效果

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 fullPage百度百科史记2013滑动滚动特效代码效果 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

fullPage百度百科史记2013滑动滚动特效代码效果

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage百度百科史记2013效果</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
	$.fn.fullpage({
		slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
		anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
		menu: '#menu',
		afterRender: function(){
			$('.screen-main span').each(function(){
				var $rel = $(this).attr('rel');
				var $arr = $rel.split(',');
				$(this).animate({
					left: $arr[2] + 'px',
					top: $arr[3] + 'px'
				}, 500);
			});
			$('.inner a').each(function(){
				var $rel = $(this).attr('rel');
				var $arr = $rel.split(',');
				$(this).animate({
					left: $arr[0] + 'px',
					top: $arr[1] + 'px'
				}, 500);
			});
		},
		afterLoad: function(anchorLink, index){
			if(index == 1){
				$('.screen-main span').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[2] + 'px',
						top: $arr[3] + 'px'
					}, 500);
				});
			}
			if(index == 2 || index == 3 || index == 4 || index == 5){
				$('.inner').eq(index - 2).find('a').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[2] + 'px',
						top: $arr[3] + 'px'
					}, 500);
				});
			}
			if(index == 6){
				$('.zanzhu-con a').fadeIn(1000);
			}
		},
		onLeave: function(index, direction){
			if(index == 1){
				$('.screen-main span').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[0] + 'px',
						top: $arr[1] + 'px'
					}, 500);
				});
			}
			if(index == 2 || index == 3 || index == 4 || index == 5){
				$('.inner').eq(index - 2).find('a').each(function(){
					var $rel = $(this).attr('rel');
					var $arr = $rel.split(',');
					$(this).animate({
						left: $arr[0] + 'px',
						top: $arr[1] + 'px'
					}, 500);
				});
			}
			if(index == 6){
				$('.zanzhu-con a').fadeOut(1000);
			}
		}
	});
});
</script>
</head>

<body>

<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1">TOP</a></li>
	<li data-menuanchor="page2"><a href="#page2">科技卷</a></li>
	<li data-menuanchor="page3"><a href="#page3">人物卷</a></li>
	<li data-menuanchor="page4"><a href="#page4">社会卷</a></li>
	<li data-menuanchor="page5"><a href="#page5">网络卷</a></li>
	<li data-menuanchor="page6"><a href="#page6">合作媒体</a></li>
</ul>

<div class="section section1">
	<div class="screen-main">
		<span class="shi1"  rel="-501,-455,449,245"></span>
		<span class="shi2"  rel="1387,-359,387,295"></span>
		<span class="shi3"  rel="-619,-359,381,341"></span>
		<span class="shi4"  rel="1295,-259,398,441"></span>
		<span class="ji1"  rel="-328,-589,673,111"></span>
		<span class="ji2"  rel="1648,-487,648,213"></span>
		<span class="ji3"  rel="-244,-488,756,212"></span>
		<span class="year2"  rel="1686,-213,686,487"></span>
		<span class="year0"  rel="-266,-189,734,511"></span>
		<span class="year1"  rel="1792,-210,792,490"></span>
		<span class="year3"  rel="-173,-207,827,493"></span>
		<span class="slogen"  rel="1462,-106,462,594"></span>
	</div>
</div>

<div class="section">
	<div class="science-inner inner">
		<a class="stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
		<a class="stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
		<a class="stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
		<a class="stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
		<a class="stiteml st5" href="javascript:void(0)" rel="1010,116,554,116">测癌试纸</a>
		<a class="stiteml st6" href="javascript:void(0)" rel="1010,146,554,146">辽宁号航空母舰</a>
		<a class="stiteml st7" href="javascript:void(0)" rel="1010,163,554,163">神舟十号飞船</a>
		<a class="stiteml st8" href="javascript:void(0)" rel="1010,236,554,236">蛟龙号载人潜水器</a>
		<a class="stitemr st9" href="javascript:void(0)" rel="-710,346,290,346">三亲婴儿</a>
		<a class="stitemr st10" href="javascript:void(0)" rel="-710,376,290,376">网格细胞</a>
		<a class="stitemr st11" href="javascript:void(0)" rel="-710,406,224,406">好奇号火星探测器</a>
		<a class="stitemr st12" href="javascript:void(0)" rel="-710,433,30,433">穿戴式智能设备</a>
		<a class="stiteml st13" href="javascript:void(0)" rel="761,1050,761,506">上帝粒子</a>
		<a class="stiteml st14" href="javascript:void(0)" rel="761,1050,761,523">比特币</a>
		<a class="stiteml st15" href="javascript:void(0)" rel="761,1050,761,587">ISON彗星</a>
		<a class="stiteml st16" href="javascript:void(0)" rel="761,1050,761,622">玉兔号</a>
		<a class="stiteml st17" href="javascript:void(0)" rel="761,1050,761,656">4G</a>
		<a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153"><img width="181" height="166" src="images/h7n9.jpg"></a>
		<a class="stimg2" href="javascript:void(0)" rel="980,2,220,2"><img width="313" height="317" src="images/shenshi.png"></a>
		<a class="stimg3" href="javascript:void(0)" rel="-407,350,413,350"><img width="313" height="215" src="images/zhuangbei.jpg"></a>
		<a class="stimg4" href="javascript:void(0)" rel="761,850,761,350"><img width="200" height="138" src="images/bit.jpg"></a>
	</div>
</div>

<div class="section">
	<div class="famous-inner inner">
		<a class="faitemr fa1" href="javascript:void(0)"  rel="90,-180,90,68">龚爱爱</a>
		<a class="faitemr fa2" href="javascript:void(0)" rel="90,-180,90,93">李某某</a>
		<a class="faitemr fa3" href="javascript:void(0)" rel="0,-180,0,113">彭丽媛</a>
		<a class="faiteml fa4" href="javascript:void(0)" rel="1280,203,235,203">撒切尔夫人</a>
		<a class="faiteml fa5" href="javascript:void(0)" rel="1280,227,235,227">安吉丽娜•朱莉</a>
		<a class="faiteml fa6" href="javascript:void(0)" rel="1080,290,235,290">雷政富</a>
		<a class="faiteml fa7" href="javascript:void(0)" rel="-300,317,100,317,">斯诺登</a>
		<a class="faiteml fa8" href="javascript:void(0)" rel="-300,533,149,533">陈永洲</a>
		<a class="faiteml fa9" href="javascript:void(0)" rel="-300,563,149,563">埃隆·马斯克</a>
		<a class="faiteml fa10" href="javascript:void(0)" rel="-300,593,149,593">曼德拉</a>
		<a class="faiteml fa11" href="javascript:void(0)" rel="1370,383,786,383">小黄人</a>
		<a class="faiteml fa12" href="javascript:void(0)" rel="1370,450,786,450">薄熙来</a>
		<a class="faiteml fa13" href="javascript:void(0)" rel="1370,480,786,480">薛蛮子</a>
		<a class="faiteml fa14" href="javascript:void(0)" rel="1370,510,786,510">夏俊峰</a>
		<a class="faiteml fa15" href="javascript:void(0)" rel="1370,540,786,540">万爱花</a>
		<a class="faimg1" href="javascript:void(0)" rel="200,-180,200,10"><img width="169" height="169" src="images/guomu.jpg"></a>
		<a class="faimg2" href="javascript:void(0)" rel="980,77,600,77"><img width="284" height="211" src="images/zhuli.jpg"></a>
		<a class="faimg3" href="javascript:void(0)" rel="980,366,290,366"><img width="491" height="328" src="images/xiaohuangren.png"></a>
		<a class="faimg4" href="javascript:void(0)" rel="-300,387,149,387"><img width="139" height="86" src="images/sinuodeng.jpg"></a>
	</div>
</div>
<div class="section">
	<div class="social-inner inner">
		<a class="soiteml so1" href="javascript:void(0)" rel="450,-175,450,51">PM2.5</a>
		<a class="soiteml so2" href="javascript:void(0)" rel="450,-175,450,110">中国梦</a>
		<a class="soiteml so3" href="javascript:void(0)" rel="450,-175,450,140">大黄鸭</a>
		<a class="soiteml so4" href="javascript:void(0)" rel="980,228,450,228">光大“乌龙指”事件</a>
		<a class="soiteml so5" href="javascript:void(0)" rel="980,258,450,258">上海自由贸易区</a>
		<a class="soiteml so6" href="javascript:void(0)" rel="980,288,450,288">以房养老</a>
		<a class="soiteml so7" href="javascript:void(0)" rel="980,340,450,340">爸爸去哪儿</a>
		<a class="soiteml so8" href="javascript:void(0)" rel="980,363,450,363">十八届三中全会</a>
		<a class="soiteml so9" href="javascript:void(0)" rel="980,428,450,428">美国政府停摆</a>
		<a class="soiteml so10" href="javascript:void(0)" rel="-405,369,162,369">中国大妈</a>
		<a class="soiteml so11" href="javascript:void(0)" rel="-405,434,162,434">中国汉字听写大会</a>
		<a class="soiteml so12" href="javascript:void(0)" rel="-405,464,162,464">互联网金融</a>
		<a class="soitemr so13" href="javascript:void(0)" rel="15,850,15,520">广州恒大足球俱乐部</a>
		<a class="soitemr so14" href="javascript:void(0)" rel="376,1050,376,585">单独二胎</a>
		<a class="soitemr so15" href="javascript:void(0)" rel="376,1050,357,612">中国式放假</a>
		<a class="soimg1" href="javascript:void(0)" rel="156,-175,156,10"><img width="270" height="160" src="images/wumai.jpg"></a>
		<a class="soimg2" href="javascript:void(0)" rel="-405,186,155,186"><img width="270" height="165" src="images/dama.jpg"></a>
		<a class="soimg3" href="javascript:void(0)" rel="980,186,675,186"><img width="277" height="166" src="images/18da.jpg"></a>
		<a class="soimg4" href="javascript:void(0)" rel="507,850,507,494"><img width="203" height="169" src="images/hengda.jpg"></a>
	</div>
</div>

<div class="section">
	<div class="net-inner inner">
		<a class="netitemr net1" href="javascript:void(0)" rel="19,-240,19,56">剁手族</a>
		<a class="netitemr net2" href="javascript:void(0)" rel="0,-240,086">喜大普奔</a>
		<a class="netitemr net3" href="javascript:void(0)" rel="0,-240,116">累觉不爱</a>
		<a class="netitemr net4" href="javascript:void(0)" rel="19,-240,19,146">陈欧体</a>
		<a class="netitemr net5" href="javascript:void(0)" rel="-54,-240,-54,176">为什么放弃治疗</a>
		<a class="netitemr net6" href="javascript:void(0)" rel="-32,-240,-32,206">大概8点20发</a>
		<a class="netiteml net7" href="javascript:void(0)" rel="980,-1,449,-1">绿茶婊</a>
		<a class="netiteml net8" href="javascript:void(0)" rel="980,28,449,28">人艰不拆</a>
		<a class="netiteml net9" href="javascript:void(0)" rel="980,50,449,50">臣妾做不到体</a>
		<a class="netiteml net10" href="javascript:void(0)"  rel="980,116,449,116">女汉子</a>
		<a class="netiteml net11" a href="javascript:void(0)"  rel="980,146,449,146">注定孤独一生</a>
		<a class="netiteml net12" a href="javascript:void(0)"  rel="980,184,449,184">我和小伙伴们都惊呆了</a>
		<a class="netitemr net13" a href="javascript:void(0)"  rel="-435,261,265,261">高端大气上档次</a>
		<a class="netitemr net14" a href="javascript:void(0)"  rel="-435,291,103,291">待我长发及腰</a>
		<a class="netitemr net15" a href="javascript:void(0)" rel="-435,351,8,351">土豪我们做朋友吧</a>
		<a class="netitemr net16" a href="javascript:void(0)"  rel="-435,428,63,428">内什么</a>
		<a class="netitemr net17" a href="javascript:void(0)"  rel="-435,458,63,458">涨姿势</a>
		<a class="netiteml net18" a href="javascript:void(0)" style="left: 449px; top: 578px;" rel="449,1140,449,578">上头条</a>
		<a class="netiteml net19" a href="javascript:void(0)" style="left: 449px; top: 608px;" rel="449,1140,449,608">妈妈再打我一次</a>
		<a class="netiteml net20" a href="javascript:void(0)" style="left: 449px; top: 638px;" rel="449,1140,449,638">因霾劝菜</a>
		<a class="netimg1" a href="javascript:void(0)" rel="139,-240,139,57"><img width="289" height="178" src="images/chenqie.jpg"></a>
		<a class="netimg2" a href="javascript:void(0)" rel="980,96,809,96"><img width="108" height="93" src="images/jingdai.png"></a>
		<a class="netimg3" a href="javascript:void(0)" rel="-435,431,179,431"><img width="205" height="174" src="images/cezhi.jpg"></a>
		<a class="netimg4" a href="javascript:void(0)" rel="451,850,451,267"><img width="270" height="291" src="images/changfa.jpg"></a>
	</div>
</div>

<div class="section">
	<div class="zanzhu">
		<h2>合作媒体</h2>
		<div class="zanzhu-con">
			<a href="javascript:void(0)"><img width="190" height="76" src="images/zhongguoshisheng.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/beijingxinwen.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/jiangxijiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/jinanjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/zhejiangjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/hubeijiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/xichuanwenyi.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/hunanjiaotong.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/heibeixinwen.png"></a>
			<a href="javascript:void(0)"><img width="190" height="76" src="images/weibo.png"></a>
		</div>
		<div class="foot clearfix">
			<p class="bd">如想投诉，请到<a target="_blank" href="javascript:void(0)">百度百科投诉中心</a>；如想提出意见、建议，请到<a target="_blank" href="javascript:void(0)">意见反馈</a>；想要了解您在百度百科的权利与义务，请查看<a target="_blank" href="javascript:void(0)">权利声明</a>。</p>
			<p class="ft">&copy;2014Baidu<a target="_blank" href="javascript:void(0)">使用百度前必读</a>|<a target="_blank" href="javascript:void(0)">百科协议</a>|<a target="_blank" href="javascript:void(0)">百度百科合作平台</a></p>
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.fullPage.min.js):

/** * fullPage 1.5.3 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
(function(b){
	b.fn.fullpage=function(c){
	function m(a){
	if(c.autoScrolling){
	a=window.event||a;
	a=Math.max(-1,Math.min(1,a.wheelDelta||-a.detail));
	var e;
	e=b(".section.active");
	if(!k)if(e=e.find(".slides").length?e.find(".slide.active").find(".scrollable"):e.find(".scrollable"),0>a)if(0<e.length)if(v("bottom",e))b.fn.fullpage.moveSectionDown();
	else return!0;
	else b.fn.fullpage.moveSectionDown();
	else if(0<e.length)if(v("top",e))b.fn.fullpage.moveSectionUp();
	else return!0;
	else b.fn.fullpage.moveSectionUp();
	return!1}
}
function F(){
	document.addEventListener?(document.addEventListener("mousewheel",m,!1),document.addEventListener("DOMMouseScroll",m,!1)):document.attachEvent("onmousewheel",m)}
function n(a,e){
	var d={
}
,f,h=a.position(),h=null!==h?h.top:null,H=G(a),l=a.data("anchor"),g=a.index(".section"),p=a.find(".slide.active");
	if(p.length){
	f=p.data("anchor");
	var q=p.index()}
p=b(".section.active").index(".section")+1;
	a.addClass("active").siblings().removeClass("active");
	k=!0;
	"undefined"!==typeof l?I(q,f,l):location.hash="";
	c.autoScrolling?(d.top=-h,f="#superContainer"):(d.scrollTop=h,f="html,body");
	c.css3&&c.autoScrolling?(b.isFunction(c.onLeave)&&c.onLeave.call(this,p,H),z("translate3d(0px,-"+h+"px,0px)",!0),setTimeout(function(){
	b.isFunction(c.afterLoad)&&c.afterLoad.call(this,l,g+1);
	setTimeout(function(){
	k=!1;
	b.isFunction(e)&&e.call(this)}
,J)}
,c.scrollingSpeed)):(b.isFunction(c.onLeave)&&c.onLeave.call(this,p,H),b(f).animate(d,c.scrollingSpeed,c.easing,function(){
	b.isFunction(c.afterLoad)&&c.afterLoad.call(this,l,g+1);
	setTimeout(function(){
	k=!1;
	b.isFunction(e)&&e.call(this)}
,J)}
));
	r=l;
	c.autoScrolling&&(K(l),L(l,g))}
function u(a,e){
	var d=e.position(),f=a.find(".slidesContainer").parent(),h=e.index(),g=a.closest(".section"),l=g.index(".section"),k=g.data("anchor"),p=g.find(".fullPage-slidesNav"),q=e.data("anchor");
	if(c.onSlideLeave){
	var m=g.find(".slide.active").index(),n;
	n=m>h?"left":"right";
	b.isFunction(c.onSlideLeave)&&c.onSlideLeave.call(this,k,l+1,m,n)}
e.addClass("active").siblings().removeClass("active");
	"undefined"===typeof q&&(q=h);
	g.hasClass("active")&&(c.loopHorizontal||(g.find(".controlArrow.prev").toggle(0!=h),g.find(".controlArrow.next").toggle(!e.is(":last-child"))),I(h,q,k));
	c.css3?(d="translate3d(-"+d.left+"px,0px,0px)",a.find(".slidesContainer").addClass("easing").css({
	"-webkit-transform":d,"-moz-transform":d,"-ms-transform":d,transform:d}
),setTimeout(function(){
	b.isFunction(c.afterSlideLoad)&&c.afterSlideLoad.call(this,k,l+1,q,h);
	s=!1}
,c.scrollingSpeed)):f.animate({
	scrollLeft:d.left}
,c.scrollingSpeed,function(){
	b.isFunction(c.afterSlideLoad)&&c.afterSlideLoad.call(this,k,l+1,q,h);
	s=!1}
);
	p.find(".active").removeClass("active");
	p.find("li").eq(h).find("a").addClass("active")}
function M(){
	var a=b(window).width();
	g=b(window).height();
	c.resize&&S(g,a);
	b(".section").each(function(){
	parseInt(b(this).css("padding-bottom"));
	parseInt(b(this).css("padding-top"));
	if(c.scrollOverflow){
	var a=b(this).find(".slide");
	a.length?a.each(function(){
	w(b(this))}
):w(b(this))}
c.verticalCentered&&b(this).find(".tableCell").css("height",g+"px");
	b(this).css("height",g+"px");
	a=b(this).find(".slides");
	a.length&&u(a,a.find(".slide.active"))}
);
	b(".section.active").position();
	a=b(".section.active");
	a.index(".section")&&n(a)}
function S(a,e){
	var c=825,f=a;
	825>a||900>e?(900>e&&(f=e,c=900),c=(100*f/c).toFixed(2),b("body").css("font-size",c+"%")):b("body").css("font-size","100%")}
function L(a,e){
	c.navigation&&(b("#fullPage-nav").find(".active").removeClass("active"),a?b("#fullPage-nav").find('a[href="#'+a+'"]').addClass("active"):b("#fullPage-nav").find("li").eq(e).find("a").addClass("active"))}
function K(a){
	c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}
function v(a,b){
	if("top"===a)return!b.scrollTop();
	if("bottom"===a)return b.scrollTop()+b.innerHeight()>=b[0].scrollHeight}
function G(a){
	var c=b(".section.active").index(".section");
	a=a.index(".section");
	return c>a?"up":"down"}
function w(a){
	a.css("overflow","hidden");
	var b=a.closest(".section"),d=a.find(".scrollable");
	(d.length?a.find(".scrollable").get(0).scrollHeight-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")):a.get(0).scrollHeight-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")))>g?(b=g-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")),d.length?d.css("height",b+"px").parent().css("height",b+"px"):(c.verticalCentered?a.find(".tableCell").wrapInner('<div class="scrollable" />'):a.wrapInner('<div class="scrollable" />'),a.find(".scrollable").slimScroll({
	height:b+"px",size:"10px",alwaysVisible:!0}
))):(a.find(".scrollable").children().first().unwrap().unwrap(),a.find(".slimScrollBar").remove(),a.find(".slimScrollRail").remove());
	a.css("overflow","")}
function N(a){
	a.addClass("table").wrapInner('<div class="tableCell" style="height:'+g+'px;
	" />')}
function z(a,c){
	b("#superContainer").toggleClass("easing",c);
	b("#superContainer").css({
	"-webkit-transform":a,"-moz-transform":a,"-ms-transform":a,transform:a}
)}
function A(a,c){
	var d=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".section").eq(a-1);
	a===r||d.hasClass("active")?O(d,c):n(d,function(){
	O(d,c)}
)}
function O(a,b){
	if("undefined"!=typeof b){
	var c=a.find(".slides"),f=c.find('[data-anchor="'+b+'"]');
	f.length||(f=c.find(".slide").eq(b));
	f.length&&u(c,f)}
}
function T(a,b){
	a.append('<div class="fullPage-slidesNav"><ul></ul></div>');
	var d=a.find(".fullPage-slidesNav");
	d.addClass(c.slidesNavPosition);
	for(var f=0;
	f<b;
	f++)d.find("ul").append('<li><a href="#"><span></span></a></li>');
	d.css("margin-left","-"+d.width()/2+"px");
	d.find("li").first().find("a").addClass("active")}
function I(a,b,c){
	var f="";
	a?("undefined"!==typeof c&&(f=c),"undefined"===typeof b&&(b=a),P=b,location.hash=f+"/"+b):location.hash=c}
function U(){
	var a=document.createElement("p"),b,c={
	webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"}
;
	document.body.insertBefore(a,null);
	for(var f in c)void 0!==a.style[f]&&(a.style[f]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[f]));
	document.body.removeChild(a);
	return void 0!==b&&0<b.length&&"none"!==b}
c=b.extend({
	verticalCentered:!0,resize:!0,slidesColor:[],anchors:[],scrollingSpeed:700,easing:"easeInQuart",menu:!1,navigation:!1,navigationPosition:"right",navigationColor:"#000",navigationTooltips:[],slidesNavigation:!1,slidesNavPosition:"bottom",controlArrowColor:"#fff",loopBottom:!1,loopTop:!1,loopHorizontal:!0,autoScrolling:!0,scrollOverflow:!1,css3:!1,paddingTop:0,paddingBottom:0,fixedElements:null,normalScrollElements:null,afterLoad:null,onLeave:null,afterRender:null,afterSlideLoad:null,onSlideLeave:null}
,c);
	var J=700;
	b.fn.fullpage.setAutoScrolling=function(a){
	c.autoScrolling=a;
	a=b(".section.active");
	c.autoScrolling?(b("html,body").css({
	overflow:"hidden",height:"100%"}
),a.length&&(c.css3?(a="translate3d(0px,-"+a.position().top+"px,0px)",z(a,!1)):b("#superContainer").css("top","-"+a.position().top+"px"))):(b("html,body").css({
	overflow:"auto",height:"auto"}
),c.css3?z("translate3d(0px,0px,0px)",!1):b("#superContainer").css("top","0px"),b("html,body").scrollTop(a.position().top))}
;
	var s=!1,B=navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/),g=b(window).height(),k=!1,r,P;
	F();
	c.css3&&(c.css3=U());
	b("body").wrapInner('<div id="superContainer" />');
	if(c.navigation){
	b("body").append('<div id="fullPage-nav"><ul></ul></div>');
	var t=b("#fullPage-nav");
	t.css("color",c.navigationColor);
	t.addClass(c.navigationPosition)}
b(".section").each(function(a){
	var e=b(this).find(".slide"),d=e.length;
	a||b(this).addClass("active");
	b(this).css("height",g+"px");
	(c.paddingTop||c.paddingBottom)&&b(this).css("padding",c.paddingTop+" 0 "+c.paddingBottom+" 0");
	"undefined"!==typeof c.slidesColor[a]&&b(this).css("background-color",c.slidesColor[a]);
	"undefined"!==typeof c.anchors[a]&&b(this).attr("data-anchor",c.anchors[a]);
	if(c.navigation){
	var f="";
	c.anchors.length&&(f=c.anchors[a]);
	a=c.navigationTooltips[a];
	"undefined"===typeof a&&(a="");
	t.find("ul").append('<li data-tooltip="'+a+'"><a href="#'+f+'"><span></span></a></li>')}
if(0<d){
	var f=100*d,h=100/d;
	e.wrapAll('<div class="slidesContainer" />');
	e.parent().wrap('<div class="slides" />');
	b(this).find(".slidesContainer").css("width",f+"%");
	b(this).find(".slides").after('<div class="controlArrow prev"></div><div class="controlArrow next"></div>');
	b(this).find(".controlArrow.next").css("border-color","transparent transparent transparent "+c.controlArrowColor);
	b(this).find(".controlArrow.prev").css("border-color","transparent "+c.controlArrowColor+" transparent transparent");
	c.loopHorizontal||b(this).find(".controlArrow.prev").hide();
	c.slidesNavigation&&T(b(this),d);
	e.each(function(a){
	a||b(this).addClass("active");
	b(this).css("width",h+"%");
	c.verticalCentered&&N(b(this))}
)}
else c.verticalCentered&&N(b(this))}
).promise().done(function(){
	b.fn.fullpage.setAutoScrolling(c.autoScrolling);
	b.isFunction(c.afterRender)&&c.afterRender.call(this);
	c.fixedElements&&c.css3&&b(c.fixedElements).appendTo("body");
	c.navigation&&(t.css("margin-top","-"+t.height()/2+"px"),t.find("li").first().find("a").addClass("active"));
	c.menu&&c.css3&&b(c.menu).appendTo("body");
	if(c.scrollOverflow)b(window).on("load",function(){
	b(".section").each(function(){
	var a=b(this).find(".slide");
	a.length?a.each(function(){
	w(b(this))}
):w(b(this))}
)}
);
	b(window).on("load",function(){
	var a=window.location.hash.replace("#","").split("/"),b=a[0],a=a[1];
	b&&A(b,a)}
)}
);
	var Q,C=!1;
	b(window).scroll(function(a){
	if(!c.autoScrolling){
	var e=b(window).scrollTop();
	a=b(".section").map(function(){
	if(b(this).offset().top<e+100)return b(this)}
);
	a=a[a.length-1];
	if(!a.hasClass("active")){
	C=!0;
	var d=G(a);
	b(".section.active").removeClass("active");
	a.addClass("active");
	var f=a.data("anchor");
	b.isFunction(c.onLeave)&&c.onLeave.call(this,a.index(".section"),d);
	b.isFunction(c.afterLoad)&&c.afterLoad.call(this,f,a.index(".section")+1);
	K(f);
	L(f,0);
	c.anchors.length&&!k&&(r=f,location.hash=f);
	clearTimeout(Q);
	Q=setTimeout(function(){
	C=!1}
,100)}
}
}
);
	var D=0,x=0,E=0,y=0;
	b(document).on("touchmove",function(a){
	if(c.autoScrolling&&B){
	a.preventDefault();
	a=a.originalEvent;
	var e=b(".section.active");
	if(!k&&!s)if(E=a.touches[0].pageY,y=a.touches[0].pageX,e.find(".slides").length&&Math.abs(x-y)>Math.abs(D-E))x>y?e.find(".controlArrow.next").trigger("click"):x<y&&e.find(".controlArrow.prev").trigger("click");
	else if(a=e.find(".slides").length?e.find(".slide.active").find(".scrollable"):e.find(".scrollable"),D>E)if(0<a.length)if(v("bottom",a))b.fn.fullpage.moveSectionDown();
	else return!0;
	else b.fn.fullpage.moveSectionDown();
	else if(0<a.length)if(v("top",a))b.fn.fullpage.moveSectionUp();
	else return!0;
	else b.fn.fullpage.moveSectionUp()}
}
);
	b(document).on("touchstart",function(a){
	c.autoScrolling&&B&&(a=a.originalEvent,D=a.touches[0].pageY,x=a.touches[0].pageX)}
);
	b.fn.fullpage.moveSectionUp=function(){
	var a=b(".section.active").prev(".section");
	c.loopTop&&!a.length&&(a=b(".section").last());
	(0<a.length||!a.length&&c.loopTop)&&n(a)}
;
	b.fn.fullpage.moveSectionDown=function(){
	var a=b(".section.active").next(".section");
	c.loopBottom&&!a.length&&(a=b(".section").first());
	(0<a.length||!a.length&&c.loopBottom)&&n(a)}
;
	b.fn.fullpage.moveTo=function(a,c){
	var d="",d=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".section").eq(a-1);
	"undefined"!==c?A(a,c):0<d.length&&n(d)}
;
	b(window).on("hashchange",function(){
	if(!C){
	var a=window.location.hash.replace("#","").split("/"),b=a[0],a=a[1],c="undefined"===typeof r,f="undefined"===typeof r&&"undefined"===typeof a;
	(b&&b!==r&&!c||f||"undefined"!==typeof a&&!s&&P!=a)&&A(b,a)}
}
);
	b(document).keydown(function(a){
	if(!k)switch(a.which){
	case 38:case 33:b.fn.fullpage.moveSectionUp();
	break;
	case 40:case 34:b.fn.fullpage.moveSectionDown();
	break;
	case 37:b(".section.active").find(".controlArrow.prev").trigger("click");
	break;
	case 39:b(".section.active").find(".controlArrow.next").trigger("click")}
}
);
	b(document).on("click","#fullPage-nav a",function(a){
	a.preventDefault();
	a=b(this).parent().index();
	n(b(".section").eq(a))}
);
	b(document).on({
	mouseenter:function(){
	var a=b(this).data("tooltip");
	b('<div class="fullPage-tooltip '+c.navigationPosition+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)}
,mouseleave:function(){
	b(this).find(".fullPage-tooltip").fadeOut().remove()}
}
,"#fullPage-nav li");
	c.normalScrollElements&&(b(document).on("mouseover",c.normalScrollElements,function(){
	document.addEventListener?(document.removeEventListener("mousewheel",m,!1),document.removeEventListener("DOMMouseScroll",m,!1)):document.detachEvent("onmousewheel",m)}
),b(document).on("mouseout",c.normalScrollElements,function(){
	F()}
));
	b(".section").on("click",".controlArrow",function(){
	if(!s){
	s=!0;
	var a=b(this).closest(".section").find(".slides"),c=a.find(".slide.active"),d=null,d=b(this).hasClass("prev")?c.prev(".slide"):c.next(".slide");
	d.length||(d=b(this).hasClass("prev")?c.siblings(":last"):c.siblings(":first"));
	u(a,d)}
}
);
	b(".section").on("click",".toSlide",function(a){
	a.preventDefault();
	a=b(this).closest(".section").find(".slides");
	a.find(".slide.active");
	var c=null,c=a.find(".slide").eq(b(this).data("index")-1);
	0<c.length&&u(a,c)}
);
	if(!B){
	var R;
	b(window).resize(function(){
	clearTimeout(R);
	R=setTimeout(M,500)}
)}
b(window).bind("orientationchange",function(){
	M()}
);
	b(document).on("click",".fullPage-slidesNav a",function(a){
	a.preventDefault();
	a=b(this).closest(".section").find(".slides");
	var c=a.find(".slide").eq(b(this).closest("li").index());
	u(a,c)}
)}
}
)(jQuery);

CSS代码(jquery.fullPage.css):

/** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
html,body{margin:0;padding:0;}
#superContainer{height:100%;position:relative;}
.section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.slide{float:left;}
.slide,.slidesContainer{height:100%;display:block;}
.slides{height:100%;overflow:hidden;position:relative;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.section.table,.slide.table{display:table;width:100%;}
.tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%;}
.slidesContainer{float:left;position:relative;}
.controlArrow{position:absolute;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;}
.controlArrow.prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent;}
.controlArrow.next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff;}
.scrollable{overflow:scroll;}
.easing{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out;}
#fullPage-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;}
#fullPage-nav.right{right:17px;}
#fullPage-nav.left{left:17px;}
.fullPage-slidesNav{position:absolute;z-index:4;left:50%;opacity:1;}
.fullPage-slidesNav.bottom{bottom:17px;}
.fullPage-slidesNav.top{top:17px;}
#fullPage-nav ul,.fullPage-slidesNav ul{margin:0;padding:0;}
#fullPage-nav li,.fullPage-slidesNav li{display:block;width:14px;height:13px;margin:7px;position:relative;}
.fullPage-slidesNav li{display:inline-block;}
#fullPage-nav li a,.fullPage-slidesNav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none;}
#fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#333;}
#fullPage-nav span,.fullPage-slidesNav span{top:2px;left:2px;width:8px;height:8px;border:1px solid #000;background:rgba(0,0,0,0);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:absolute;z-index:1;}
.fullPage-tooltip{position:absolute;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;top:-2px;}
.fullPage-tooltip.right{right:20px;}
.fullPage-tooltip.left{left:20px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.48 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.48 MB
立即下载
金秋爱
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章