jQuery单页滚动插件pagepiling js代码

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

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

以下是 jQuery单页滚动插件pagepiling js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>jQuery��ҳ�������pagepiling</title>
	<link rel="stylesheet" type="text/css" href="css/jquery.pagepiling.css" />
	<link rel="stylesheet" type="text/css" href="css/examples.css" />

	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>

	<script type="text/javascript" src="js/jquery.pagepiling.min.js"></script>
	<script type="text/javascript">
		var deleteLog = false;

		$(document).ready(function() {
	    	$('#pagepiling').pagepiling({
	    		menu: '#menu',
	    		anchors: ['page1', 'page2', 'page3'],
			    sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
			    onLeave: function(index, nextIndex, direction){
			    	if(deleteLog){
			    		$('#callbacksDiv').html('');
			    	}
			    	$('#callbacksDiv').append('<p>onLeave - index:' + index + ' nextIndex:' + nextIndex + ' direction:' + direction + '</p>')
			    },
			    afterRender: function(){
			    	$('#callbacksDiv').append('<p>afterRender</p>');
			    },
			    afterLoad: function(anchorLink, index){
			    	$('#callbacksDiv').append('<p>afterLoad - anchorLink:' + anchorLink + " index:" + index + '</p>');

			    	//section 2
					if(index == 2){
						//moving the image
						$('#section2').find('.intro').delay(100).animate({
							left: '0%'
						}, 1500, 'easeOutExpo', function(){
							$('#section2').find('p').first().fadeIn(700, function(){
								$('#section2').find('p').last().fadeIn(600);
							});
						});


					}

					//section 3
					if(anchorLink == 'page3'){
						//section 3
						$('#section3').find('.intro').delay(100).animate({
								left: '0%'
						}, 1500, 'easeOutExpo');
					}

					deleteLog = true;
			    }
			});
	    });
    </script>

    <style>
    #section2 .intro{
    	left: -150%;
		position: relative;
    }
    #section2 p{
    	display: none;
    }
    #section3 .intro{
    	left: 140%;
		position: relative;
    }
    </style>

</head>
<body>

	<ul id="menu">
		<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
		<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
		<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
	</ul>

	<div style="position:fixed;top:50px;left:50px;color:white;z-index:999;" id="callbacksDiv"></div>

	<div id="pagepiling">
	    <div class="section" id="section1">
	    	<h1>Callbacks</h1>
			<br />
	    </div>
	    <div class="section" id="section2">
	    	<div class="intro">
	    		<h1>Feel free</h1>
	    		<p>All the callbacks you need to do whatever you need.</p>
	    		<p>Just what you would expect.</p>
	    	</div>
	    </div>
	    <div class="section" id="section4">
	    	<div class="intro">
	    		<h1>Ideal for animations</h1>
	    		<p>Total control over your website.</p>
	    	</div>
	    </div>
	</div>

</body>
</html>

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

/* =========================================================== * pagepiling.js 0.0.2 (Beta) * * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2014 alvarotrigo.com - A project by Alvaro Trigo * * ========================================================== */
(function(b){
	b.fn.pagepiling=function(c){
	function s(){
	var a=destination.index(".pp-section");
	return b(".pp-section.active").index(".pp-section")<a?"down":"up"}
function g(a,d){
	var p=b(".pp-section.active"),f=a.data("anchor"),e=a.index(".pp-section"),g=s(a),h=p.index(".pp-section")+1;
	"undefined"===typeof d&&(d=!0);
	"undefined"!==typeof f&&c.anchors.length&&(location.hash=f);
	a.addClass("active").siblings().removeClass("active");
	if(p.index(".pp-section")<e){
	var k="translate3d(0px,-100%,0px)",n="-100%",q=b(".pp-section").map(function(d){
	if(d<a.index(".pp-section"))return b(this)}
);
	c.css3||q.each(function(a){
	a!=p.index(".pp-section")&&b(this).css({
	top:n}
)}
);
	var r=p,l=function(){
}
}
else k="translate3d(0px,0px,0px)",n="0",q=b(".pp-section").map(function(d){
	if(d>a.index(".pp-section"))return b(this)}
),r=a,l=function(){
	q.each(function(a){
	b(this).css({
	top:n}
)}
)}
;
	var m=function(){
	b.isFunction(c.afterLoad)&&c.afterLoad.call(this,f,e+1)}
;
	b.isFunction(c.onLeave)&&c.onLeave.call(this,h,e+1,g);
	c.css3?(t(r,k,d),q.each(function(){
	t(b(this),k,d)}
),setTimeout(function(){
	m()}
,c.scrollingSpeed)):d?r.animate({
	top:n}
,c.scrollingSpeed,c.easing,function(){
	l();
	m()}
):(r.css("top",n),setTimeout(function(){
	l();
	m()}
,400));
	B(f);
	C(f,e);
	u=f;
	v=(new Date).getTime()}
function l(){
	return(new Date).getTime()-v<600+c.scrollingSpeed?!0:!1}
function t(a,b,c){
	a.toggleClass("pp-easing",c);
	a.css({
	"-webkit-transform":b,"-moz-transform":b,"-ms-transform":b,transform:b}
)}
function h(a){
	if(!l()){
	a=window.event||a;
	a=Math.max(-1,Math.min(1,a.wheelDelta||-a.deltaY||-a.detail));
	var d=b(".pp-section.active"),d=w(d);
	0>a?k("down",d):k("up",d);
	return!1}
}
function k(a,d){
	if("down"==a)var c="bottom",e=b.fn.pagepiling.moveSectionDown;
	else c="top",e=b.fn.pagepiling.moveSectionUp;
	if(0<d.length)if(isScrolled(c,d))e();
	else return!0;
	else e()}
function w(a){
	return scrollable=a.find(".pp-scrollable")}
function s(a){
	var c=b(".pp-section.active").index(".pp-section");
	a=a.index(".pp-section");
	return c>a?"up":"down"}
function x(){
	return window.PointerEvent?{
	down:"pointerdown",move:"pointermove",up:"pointerup"}
:{
	down:"MSPointerDown",move:"MSPointerMove",up:"MSPointerUp"}
}
function y(a){
	var b=[];
	window.navigator.msPointerEnabled?(b.y=a.pageY,b.x=a.pageX):(b.y=a.touches[0].pageY,b.x=a.touches[0].pageX);
	return b}
function D(a){
	touchStartY=y(a.originalEvent).y}
function E(a){
	var d=a.originalEvent;
	a.preventDefault();
	z(a.target)||(a=b(".pp-section.active"),a=w(a),l()||(d=y(d),touchEndY=d.y,touchEndX=d.x,Math.abs(touchStartY-touchEndY)>e.height()/100*c.touchSensitivity&&(touchStartY>touchEndY?k("down",a):touchEndY>touchStartY&&k("up",a))))}
function z(a,d){
	d=d||0;
	var e=b(a).parent();
	return d<c.normalScrollElementTouchThreshold&&e.is(c.normalScrollElements)?!0:d==c.normalScrollElementTouchThreshold?!1:z(e,++d)}
function F(){
	b("body").append('<div id="pp-nav"><ul></ul></div>');
	var a=b("#pp-nav");
	a.css("color",c.navigation.textColor);
	a.addClass(c.navigation.position);
	for(var d=0;
	d<b(".pp-section").length;
	d++){
	var e="";
	c.anchors.length&&(e=c.anchors[d]);
	if("undefined"!==typeof c.navigation.tooltips){
	var f=c.navigation.tooltips[d];
	"undefined"===typeof f&&(f="")}
a.find("ul").append('<li data-tooltip="'+f+'"><a href="#'+e+'"><span></span></a></li>')}
a.find("span").css("border-color",c.navigation.bulletsColor)}
function C(a,d){
	c.navigation&&(b("#pp-nav").find(".active").removeClass("active"),a?b("#pp-nav").find('a[href="#'+a+'"]').addClass("active"):b("#pp-nav").find("li").eq(d).find("a").addClass("active"))}
function B(a){
	c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}
function G(){
	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 e in c)void 0!==a.style[e]&&(a.style[e]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[e]));
	document.body.removeChild(a);
	return void 0!==b&&0<b.length&&"none"!==b}
var e=b(this),u,v=0,A="ontouchstart"in window||0<navigator.msMaxTouchPoints;
	c=b.extend({
	menu:null,verticalCentered:!0,sectionsColor:[],anchors:[],scrollingSpeed:700,easing:"swing",loopBottom:!1,loopTop:!1,css3:!0,navigation:{
	textColor:"#000",bulletsColor:"#000",position:"right",tooltips:["section1","section2","section3","section4"]}
,normalScrollElementTouchThreshold:5,touchSensitivity:5,keyboardScrolling:!0,sectionSelector:".section",animateAnchor:!1,afterLoad:null,onLeave:null,afterRender:null}
,c);
	b.fn.pagepiling.setScrollingSpeed=function(a){
	c.scrollingSpeed=a}
;
	b.fn.pagepiling.setMouseWheelScrolling=function(a){
	a?e.get(0).addEventListener?(e.get(0).addEventListener("mousewheel",h,!1),e.get(0).addEventListener("wheel",h,!1)):e.get(0).attachEvent("onmousewheel",h):e.get(0).addEventListener?(e.get(0).removeEventListener("mousewheel",h,!1),e.get(0).removeEventListener("wheel",h,!1)):e.get(0).detachEvent("onmousewheel",h)}
;
	b.fn.pagepiling.setAllowScrolling=function(a){
	a?(b.fn.pagepiling.setMouseWheelScrolling(!0),A&&(MSPointer=x(),e.off("touchstart "+MSPointer.down).on("touchstart "+MSPointer.down,D),e.off("touchmove "+MSPointer.move).on("touchmove "+MSPointer.move,E))):(b.fn.pagepiling.setMouseWheelScrolling(!1),A&&(MSPointer=x(),e.off("touchstart "+MSPointer.down),e.off("touchmove "+MSPointer.move)))}
;
	b.fn.pagepiling.setKeyboardScrolling=function(a){
	c.keyboardScrolling=a}
;
	b.fn.pagepiling.moveSectionUp=function(){
	var a=b(".pp-section.active").prev(".pp-section");
	!a.length&&c.loopTop&&(a=b(".pp-section").last());
	a.length&&g(a)}
;
	b.fn.pagepiling.moveSectionDown=function(){
	var a=b(".pp-section.active").next(".pp-section");
	!a.length&&c.loopBottom&&(a=b(".pp-section").first());
	a.length&&g(a)}
;
	b.fn.pagepiling.moveTo=function(a){
	var c="",c=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1);
	0<c.length&&g(c)}
;
	b(c.sectionSelector).each(function(){
	b(this).addClass("pp-section")}
);
	c.css3&&(c.css3=G());
	b(e).css({
	overflow:"hidden","-ms-touch-action":"none","touch-action":"none"}
);
	b.fn.pagepiling.setAllowScrolling(!0);
	b.isEmptyObject(c.navigation)||F();
	var m=b(".pp-section").length;
	b(".pp-section").each(function(a){
	b(this).data("data-index",a);
	b(this).css("z-index",m);
	a||0!==b(".pp-section.active").length||b(this).addClass("active");
	"undefined"!==typeof c.anchors[a]&&b(this).attr("data-anchor",c.anchors[a]);
	"undefined"!==typeof c.sectionsColor[a]&&b(this).css("background-color",c.sectionsColor[a]);
	c.verticalCentered&&b(this).addClass("pp-table").wrapInner('<div class="pp-tableCell" style="height:100%" />');
	m-=1}
).promise().done(function(){
	c.navigation&&(b("#pp-nav").css("margin-top","-"+b("#pp-nav").height()/2+"px"),b("#pp-nav").find("li").eq(b(".pp-section.active").index(".pp-section")).find("a").addClass("active"));
	b(window).on("load",function(){
	var a=window.location.hash.replace("#",""),a=b('.pp-section[data-anchor="'+a+'"]');
	0<a.length&&g(a,c.animateAnchor)}
);
	b.isFunction(c.afterRender)&&c.afterRender.call(this)}
);
	b(window).on("hashchange",function(){
	var a=window.location.hash.replace("#","").split("/")[0];
	a.length&&a&&a!==u&&(a=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1),g(a))}
);
	b(document).keydown(function(a){
	if(c.keyboardScrolling&&!l())switch(a.which){
	case 38:case 33:b.fn.pagepiling.moveSectionUp();
	break;
	case 40:case 34:b.fn.pagepiling.moveSectionDown();
	break;
	case 36:b.fn.pagepiling.moveTo(1);
	break;
	case 35:b.fn.pagepiling.moveTo(b(".pp-section").length);
	break;
	case 37:b.fn.pagepiling.moveSlideLeft();
	break;
	case 39:b.fn.pagepiling.moveSlideRight()}
}
);
	b(document).on("click touchstart","#pp-nav a",function(a){
	a.preventDefault();
	a=b(this).parent().index();
	g(b(".pp-section").eq(a))}
);
	b(document).on({
	mouseenter:function(){
	var a=b(this).data("tooltip");
	b('<div class="pp-tooltip '+c.navigation.position+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)}
,mouseleave:function(){
	b(this).find(".pp-tooltip").fadeOut(200,function(){
	b(this).remove()}
)}
}
,"#pp-nav li")}
}
)(jQuery);

CSS代码(examples.css):

@CHARSET "ISO-8859-1";/* Reset CSS * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
a{text-decoration:none;}
table{border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
strong{font-weight:bold;}
ol,ul{list-style:none;margin:0;padding:0;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;margin:0;padding:0;color:#f2f2f2;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* Custom CSS * --------------------------------------- */
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#f2f2f2;}
h1{font-size:6em;}
p{font-size:2em;}
.section{text-align:center;}
/* Menu * --------------------------------------- */
#menu li{display:inline-block;margin:10px;color:#000;background:#fff;background:rgba(255,255,255,0.5);-webkit-border-radius:10px;border-radius:10px;}
#menu li.active{background:#666;background:rgba(0,0,0,0.5);color:#fff;}
#menu li a{text-decoration:none;color:#000;}
#menu li.active a:hover{color:#000;}
#menu li:hover{background:rgba(255,255,255,0.8);}
#menu li a,#menu li.active a{padding:9px 18px;display:block;}
#menu li.active a{color:#fff;}
#menu{position:fixed;top:0;left:0;height:40px;z-index:70;width:100%;padding:0;margin:0;}
.intro p{width:50%;margin:0 auto;font-size:1.5em;}
.twitter-share-button{position:fixed;z-index:99;right:149px;top:9px;}
#download{margin:10px 0 0 0;padding:15px 10px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(top,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de',endColorstr='#2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;vertical-align:middle;cursor:pointer;display:inline-block;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);}
#download a{text-decoration:none;color:#fff;}
#download:hover{text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#2F96B4;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear;}
#infoMenu{height:20px;color:#f2f2f2;position:fixed;z-index:70;bottom:0;width:100%;text-align:right;font-size:0.9em;padding:8px 0 8px 0;}
#infoMenu ul{padding:0 40px;}
#infoMenu li a{display:block;margin:0 22px 0 0;color:#333;}
#infoMenu li a:hover{text-decoration:underline;}
#infoMenu li{display:inline-block;position:relative;}
#examplesList{display:none;background:#282828;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;padding:20px;float:left;position:absolute;bottom:29px;right:0;width:638px;text-align:left;}
#examplesList ul{padding:0;}
#examplesList ul li{display:block;margin:5px 0;}
#examplesList ul li a{color:#BDBDBD;margin:0;}
#examplesList ul li a:hover{color:#f2f2f2;}
#examplesList .column{float:left;margin:0 20px 0 0;}
#examplesList h3{color:#f2f2f2;font-size:1.2em;margin:0 0 15px 0;border-bottom:1px solid rgba(0,0,0,0.4);-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:0 1px 0 rgba(255,255,255,0.1);box-shadow:0 1px 0 rgba(255,255,255,0.1);padding:0 0 5px 0;}
/* Section 1 * --------------------------------------- */
#section1 h1{color:#444;}
#section1 p{color:#333;color:rgba(0,0,0,0.3);}
#section1 img{margin:20px 0;opacity:0.7;}
/* Section 2 * --------------------------------------- */
#section2 h1,#section2 p{z-index:3;}
#section2 p{opacity:0.8;}
#section2 #colors{right:60px;bottom:0;position:absolute;height:413px;width:258px;background-image:url(imgs/colors.gif);background-repeat:no-repeat;}
/* Section 3 * --------------------------------------- */
#section3 #colors{left:60px;bottom:0;}
#section3 p{color:#757575;}
#colors2,#colors3{position:absolute;height:163px;width:362px;z-index:1;background-repeat:no-repeat;left:0;margin:0 auto;right:0;}
#colors2{background-image:url(imgs/colors2.gif);top:0;}
#colors3{background-image:url(imgs/colors3.gif);bottom:0;}
/* Section 4 * --------------------------------------- */
#section4 p{opacity:0.6;}
/* Overwriting fullPage.js tooltip color* --------------------------------------- */
#pp-nav.custom .pp-tooltip{color:#AAA;}

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