jquery.fullPage实现搜狐快站页面效果滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery.fullPage实现搜狐快站页面效果滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jquery.fullPage实现搜狐快站页面效果</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
#side { position: fixed; left: 0; top: 0; z-index: 10; width: 300px; height: 100%; background-image: url(images/df-side.png);}
.inner { position: absolute; left: 50%; top: 50%; width: 226px; margin: -112px 0 0 -113px;}
.hgroup { width: 226px; height: 81px; margin: 0 auto; text-indent: -9999px; background-image: url(images/df-logo.png);}
.start { display: block; width: 186px; height: 56px; margin: 66px auto 0; text-indent: -9999px; overflow: hidden; background-image: url(images/df-start.png);}
#menu { position: absolute; right: -20px; top: 50%; width: 40px; margin-top: -170px; padding: 0; list-style-type: none;}
#menu li { float: left;}
#menu a { display: block; width: 28px; height: 28px; margin: 20px 6px; border-radius: 14px; text-indent: -9999px; overflow: hidden; background-color: #a0afb9; background-position: 50%; background-repeat: no-repeat;}
#menu .a1 { background-image: url(images/df-01.png);}
#menu .a2 { background-image: url(images/df-02.png);}
#menu .a3 { background-image: url(images/df-03.png);}
#menu .a4 { background-image: url(images/df-04.png);}
#menu .a5 { background-image: url(images/df-05.png);}
#menu a:hover, #menu .active a { margin: 14px 0; border: 6px solid #fff; box-shadow: 1px 1px 3px 1px #b4d7ed; border-radius: 20px; background-color: #239ae6;}
.section { margin-left: 300px; text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section .imgbox { margin-left: 300px;}
.section img { position: relative; left: -300px; display: block; margin: 0 auto;}
</style>
<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.js"></script>
<script>
$(document).ready(function() {
	$.fn.fullpage({
		slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
		anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
		menu: '#menu'
	});
});
</script>
</head>

<body>

<div id="side">
	<div class="inner">
		<div class="hgroup">
			<h1><a href="#">搜狐快站</a></h1>
			<h2>专业的移动建站平台</h2>
		</div>
		<a class="start" href="#">开始建站</a>
	</div>
	<ul id="menu">
		<li class="active" data-menuanchor="page1"><a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点</a></li>
		<li data-menuanchor="page2"><a class="a2" href="#page2" title="丰富的模板">丰富的模板</a></li>
		<li data-menuanchor="page3"><a class="a3" href="#page3" title="强大的功能组件">强大的功能组件</a></li>
		<li data-menuanchor="page4"><a class="a4" href="#page4" title="多种屏幕预览">多种屏幕预览</a></li>
		<li data-menuanchor="page5"><a class="a5" href="#page5" title="全网高速访问">全网高速访问</a></li>
	</ul>
</div>

<div class="section">
	<div class="imgbox">
		<img src="images/1.jpg" alt="快速创建移动站点">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/2.jpg" alt="丰富的模板">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/3.jpg" alt="强大的功能组件">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/4.jpg" alt="多种屏幕预览">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/5.jpg" alt="全网高速访问">
	</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;}

附件:下载该文件资源,减少时间成本(增值服务)