js滑动步骤流程向导特效代码

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

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

以下是 js滑动步骤流程向导特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动步骤流程向导</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#101010;}
/* toolbarwrap */
.toolbarwrap{width:415px;height:45px;margin:40px auto 0 auto;padding:0;background:#101010 url(images/header.gif) repeat-x;border-bottom:6px solid #790000;}
ul.navigation li{float:left;padding:0 0 0 25px;}
ul.navigation li a{float:left;line-height:38px;border-top:5px solid #202020;color:#707070;}
ul.navigation li a:hover,ul.navigation li.active a{text-decoration:none;border-top:5px solid #606060;color:#fff;}
ul.navigation li.inactive{text-decoration:none;color:#707070;}
#scroller{width:413px;margin:0 auto;	overflow:hidden;border-left:1px solid #606060;border-right:1px solid #606060;border-bottom:1px solid #606060;}
#scroller ul{width:2490px;}
#scroller li{width:405px;height:270px;float:left;padding:5px;text-align:center;background:#fff;position:relative;}
#scroller li .btn{width:100%;position:absolute;bottom:10px;left:0;text-align:center;font-family:"新宋体";}
#scroller li .btn a{margin:0 10px;color:#ff6600;font-weight:800;cursor:pointer;}
</style>
</head>

<body>

<script type="text/javascript" src="js/cfcoda.js"></script>

<div class="toolbarwrap">
	<ul id="toolbar" class="navigation">
		<li id="home-tab" class="active"><a onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">
		第一步</a></li>
		<li id="about-tab"><a onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">
		第二步</a></li>
		<li id="scripts-tab"><a onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">
		第三步</a></li>
		<li id="downloads-tab"><a onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">
		第四步</a></li>
		<li id="faq-tab"><a onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">
		第五步</a></li>
		<li id="contact-tab"><a onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">
		完成</a></li>
	</ul>
</div>

<div id="scroller">
	<ul>
		<li id="home-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第一步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				第二步 &gt; </a>
			</div>	
		</li>
		<li id="about-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第二步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				第三步 &gt; </a>
			</div>	
		</li>
		<li id="scripts-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第三步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				第四步 &gt; </a>
			</div>
		</li>
		<li id="downloads-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第四步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				第五步 &gt; </a>
			</div>	
		</li>
		<li id="faq-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第五步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				完成 &gt; </a>
			</div>	
		</li>
		<li id="contact-pane">
			<div class="btn">
				<a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');"> 
				&lt; 第五步</a>
				<a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">
				返回第一步 &gt; </a>
			</div>	
		</li>
	</ul>	
</div>
</body>
</html>

JS代码(cfcoda.js):

////Code taken and adapted from CodaEffects.js - (C) 2007 Panic,Inc.//http://www.panic.com//////var currentSection = "home-pane";
	// The default loaded section on the pagevar tabTag = "-tab";
	var paneTag = "-pane";
	// Scroll the page manually to the position of element "link",passed to us.function ScrollSection(link,scrollArea,offset){
	// Store the last section,and update the current sectionif (currentSection == link){
	return;
}
lastSection = currentSection;
	currentSection = link;
	// Change the section highlight.// Extract the root section name,and use that to change the background image to 'top',revealing the alt. state sectionTab = currentSection.split("-")[0] + tabTag;
	document.getElementById(sectionTab).className = 'active';
	if (lastSection){
	lastTab = lastSection.split("-")[0] + tabTag;
	document.getElementById(lastTab).className = "inactive";
}
// Get the element we want to scroll,get the position of the element to scroll totheScroll = document.getElementById(scrollArea);
	position = findElementPos(document.getElementById(link));
	// Get the position of the offset div -- the div at the far left.// This is the amount we compensate for when scrollingif (offset != ""){
	offsetPos = findElementPos(document.getElementById(offset));
	position[0] = position[0] - offsetPos[0];
}
scrollStart(theScroll,theScroll.scrollLeft,position[0],"horiz");
	// return false;
}
function ScrollArrow(direction,toolbar,scrollArea,offset){
	toolbarElem = document.getElementById(toolbar);
	toolbarNames = new Array();
	// Find all the <li> elements in the toolbar,and extract their id's into an array.if (toolbarElem.hasChildNodes()){
	var children = toolbarElem.childNodes;
	for (var i = 0;
	i < children.length;
	i++){
	if (toolbarElem.childNodes[i].tagName == "LI"){
	toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]);
}
}
}
// Now iterate through our array of tab names,find matches,and determine where to go.for (var i = 0;
	i < toolbarNames.length;
	i++){
	if (toolbarNames[i] == currentSection.split("-")[0]){
	if (direction == "left"){
	if (i - 1 < 0){
	gotoTab = toolbarNames[toolbarNames.length - 1];
}
else{
	gotoTab = toolbarNames[i - 1];
}
}
else{
	if ((i + 1) > (toolbarNames.length - 1)){
	gotoTab = toolbarNames[0];
}
else{
	gotoTab = toolbarNames[i + 1];
}
}
}
}
// Go to the section name!ScrollSection(gotoTab+paneTag,scrollArea,offset);
}
var scrollanim ={
	time:0,begin:0,change:0.0,duration:0.0,element:null,timer:null}
;
	function scrollStart(elem,start,end,direction){
	//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);
	if (scrollanim.timer != null){
	clearInterval(scrollanim.timer);
	scrollanim.timer = null;
}
scrollanim.time = 0;
	scrollanim.begin = start;
	scrollanim.change = end - start;
	scrollanim.duration = 25;
	scrollanim.element = elem;
	if (direction == "horiz"){
	scrollanim.timer = setInterval("scrollHorizAnim();
	",15);
}
else{
	scrollanim.timer = setInterval("scrollVertAnim();
	",15);
}
}
function scrollVertAnim(){
	if (scrollanim.time > scrollanim.duration){
	clearInterval(scrollanim.timer);
	scrollanim.timer = null;
}
else{
	move = sineInOut(scrollanim.time,scrollanim.begin,scrollanim.change,scrollanim.duration);
	scrollanim.element.scrollTop = move;
	scrollanim.time++;
}
}
function scrollHorizAnim(){
	if (scrollanim.time > scrollanim.duration){
	clearInterval(scrollanim.timer);
	scrollanim.timer = null;
}
else{
	move = sineInOut(scrollanim.time,scrollanim.begin,scrollanim.change,scrollanim.duration);
	scrollanim.element.scrollLeft = move;
	scrollanim.time++;
}
}
function findElementPos(elemFind){
	var elemX = 0;
	var elemY = 0;
	do{
	elemX += elemFind.offsetLeft;
	elemY += elemFind.offsetTop;
}
while ( elemFind = elemFind.offsetParent )//console.log("Found element "+elemFind+" at "+elemY+"/"+elemX);
	return Array(elemX,elemY);
}
function sineInOut(t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}

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