jQuery页面内容滚动效果js代码

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

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

以下是 jQuery页面内容滚动效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<link rel="stylesheet" type="text/css" href="style/style.css" /> 
		<link rel="stylesheet" type="text/css" href="style/scrollpath.css" /> 
		<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis&subset=latin" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="script/lib/prefixfree.min.js"></script>
		<meta name="description" content="The plugin that lets you define custom scroll paths" /> 
		<title>jQuery Scroll Path</title>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#start">1</a></li>
				<li><a href="#description">2</a></li>
				<li><a href="#syntax">3</a></li>
				<li><a href="#scrollbar">4</a></li>
				<li><a href="#rotations">5</a></li>
				<li><a href="#rotations-rotated">6</a></li>
				<li><a href="#source">7</a></li>
				<li><a href="#follow">8</a></li>
			</ul>
		</nav>
		<div class="settings">
			<a href="" class="show-path">Show Path</a>
		</div>
		<div class="wrapper">
			<div class="demo">
				<h1>jQuery Scroll Path</h1>
				<span class="arrow">&darr;</span> A Quick Demo <span class="arrow">&darr;</span>
			</div>
			
			<div class="description">
				<span class="big">It's a plugin for defining custom scroll paths.</span>
			</div>

			<div class="syntax">
				<span class="big">It uses canvas flavored syntax to draw lines and arcs.</span>
			</div>

			<div class="scrollbar">
				<span class="big">It comes with a custom scrollbar.</span>
			</div>

			<div class="rotations">
				<span class="big">It also does rotations</span>
				<span class="upside-down big">in supported browsers.</span>
			</div>

			<div class="source">
				<span class="big">It's available with documentation on GitHub.<span>
			</div>

			<div class="follow">
				<span class="big">Feel free to follow me on Twitter. You can also be <span class="count">a kind person and</span> tweet this.</span>
			</div>
		</div>
	<script type="text/javascript" src="script/jquery-latest.pack.js"></script>
	<script type="text/javascript" src="script/lib/jquery.easing.js"></script>
	<script type="text/javascript" src="script/jquery.scrollpath.js"></script>
	<script type="text/javascript" src="script/demo.js"></script>
	</body>
</html>

JS代码(demo.js):

$(document).ready(init);
	function init(){
	/* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */
$.fn.scrollPath("getPath")// Move to 'start' element.moveTo(400,50,{
	name:"start"}
)// Line to 'description' element.lineTo(400,800,{
	name:"description"}
)// Arc down and line to 'syntax'.arc(200,1200,400,-Math.PI/2,Math.PI/2,true).lineTo(600,1600,{
	callback:function(){
	highlight($(".settings"));
}
,name:"syntax"}
)// Continue line to 'scrollbar'.lineTo(1750,1600,{
	callback:function(){
	highlight($(".sp-scroll-handle"));
}
,name:"scrollbar"}
)// Arc up while rotating.arc(1800,1000,600,Math.PI/2,0,true,{
	rotate:Math.PI/2}
)// Line to 'rotations'.lineTo(2400,750,{
	name:"rotations"}
)// Rotate in place.rotate(3*Math.PI/2,{
	name:"rotations-rotated"}
)// Continue upwards to 'source'.lineTo(2400,-700,{
	name:"source"}
)// Small arc downwards.arc(2250,-700,150,0,-Math.PI/2,true)//Line to 'follow'.lineTo(1350,-850,{
	name:"follow"}
)// Arc and rotate back to the beginning..arc(1300,50,900,-Math.PI/2,-Math.PI,true,{
	rotate:Math.PI*2,name:"end"}
);
	// We're done with the path,let's initate the plugin on our wrapper element$(".wrapper").scrollPath({
	drawPath:true,wrapAround:true}
);
	// Add scrollTo on click on the navigation anchors$("nav").find("a").each(function(){
	var target = this.getAttribute("href").replace("#","");
	$(this).click(function(e){
	e.preventDefault();
	// Include the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/)// for extra easing functions like the one below$.fn.scrollPath("scrollTo",target,1000,"easeInOutSine");
}
);
}
);
	/* ===================================================================== */
$(".settings .show-path").click(function(e){
	e.preventDefault();
	$(".sp-canvas").toggle();
}
).toggle(function(){
	$(this).text("Hide Path");
}
,function(){
	$(this).text("Show Path");
}
);
	$(".tweet").click(function(e){
	open(this.href,"","width=550,height=450");
	e.preventDefault();
}
);
	$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?callback=?&url=http%3A%2F%2Fjoelb.me%2Fscrollpath",function(data){
	if(data && data.count !== undefined){
	$(".follow .count").html("the " + ordinal(data.count + 1) + " kind person to");
}
}
);
}
function highlight(element){
	if(!element.hasClass("highlight")){
	element.addClass("highlight");
	setTimeout(function(){
	element.removeClass("highlight");
}
,2000);
}
}
function ordinal(num){
	return num + ((num % 10 == 1 && num % 100 != 11) ? 'st':(num % 10 == 2 && num % 100 != 12) ? 'nd':(num % 10 == 3 && num % 100 != 13) ? 'rd':'th');
}

CSS代码(style.css):

/* === CSS RESET === */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* === End of CSS RESET === */
body{background:url(../assets/classy_fabric.png);color:white;font-size:20px;font-family:"Terminal Dosis",sans-serif;text-shadow:1px 1px 0 transparent,2px 2px 0 #101010;overflow:hidden;}
h1{font-size:75px;font-weight:bold;line-height:1.5em;text-shadow:2px 2px 0 transparent,4px 4px 0 #101010;}
a,a:visited{color:white;text-decoration:none;border-bottom:2px dotted;transition:color 0.2s;}
a:hover{color:#AAA;}
a:active{color:lightblue;}
.big{display:block;font-size:45px;font-weight:bold;line-height:1.3em;margin-bottom:10px;text-shadow:2px 2px 0 transparent,4px 4px 0 #101010;}
.wrapper div{position:absolute;}
.settings,nav{position:fixed;z-index:9999999;bottom:0;background:rgba(10,10,10,0.5);font-family:Helvetica,Arial,sans-serif;font-weight:normal;font-size:20px;}
.settings{right:0;padding:10px 20px;border-radius:10px 0 0 0;}
.settings a{border:none;}
nav{left:0;border-radius:0 10px 0 0;}
nav li{float:left;}
nav a{display:block;width:40px;height:40px;line-height:40px;border:none;text-align:center;transition:0.25s;}
nav li:last-child a{border-radius:0 10px 0 0;}
nav a:hover{background:rgba(15,15,15,0.5);}
.sp-canvas{display:none;}
.arrow{position:relative;display:inline-block;}
.demo{width:800px;font-size:30px;text-align:center;font-weight:bold;}
.demo .arrow{font-size:20px;animation:point-down 0.5s alternate infinite;}
.description{top:740px;left:180px;width:440px;}
.syntax{top:1510px;left:430px;width:400px;}
.scrollbar{top:1540px;left:1600px;width:400px;}
.rotations{left:2185px;top:660px;width:460px;transform:rotate(-90deg) translateY(2.5em);}
.rotations .upside-down{font-size:42px;text-align:right;transform:rotate(180deg) translateY(3em);}
.source{left:2200px;top:-800px;width:400px;transform:rotate(90deg) translateX(50px);}
.follow{width:475px;left:1100px;top:-950px;transform:rotate(90deg) translateX(50px);}
.follow .big{font-size:40px;}
.highlight{animation:highlight 0.2s alternate 6;}
@keyframes point-down{from{top:0;}
to{top:5px;}
}
@keyframes highlight{to{background:lightblue;}
}

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