jQuery滑动分步式进度导航条滚动特效代码

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

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

以下是 jQuery滑动分步式进度导航条滚动特效代码的示例演示效果:

当前平台(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>jQuery滑动分步式进度导航条代码</title>
<link rel="stylesheet" href="css/control.css" type="text/css" />
</head>
<body>

<div id="stepBar" class="ui-stepBar-wrap">
	<div class="ui-stepBar">
		<div class="ui-stepProcess"></div>
	</div>
	<div class="ui-stepInfo-wrap">
		<table class="ui-stepLayout" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">1</a>
					<p class="ui-stepName">注册</p>
				</td>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">2</a>
					<p class="ui-stepName">填写验证信息</p>
				</td>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">3</a>
					<p class="ui-stepName">填写基本信息</p>
				</td>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">4</a>
					<p class="ui-stepName">填写安全信息</p>
				</td>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">5</a>
					<p class="ui-stepName">激活账户</p>
				</td>
				<td class="ui-stepInfo">
					<a class="ui-stepSequence">6</a>
					<p class="ui-stepName">完成注册</p>
				</td>
			</tr>
		</table>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/stepBar.js"></script>
<script type="text/javascript">
$(function(){

	stepBar.init("stepBar", {
		step : 4,
		change : true,
		animation : true
	});

});
</script>
</body>
</html>

JS代码(stepBar.js):

/** * author：xyzsyx@163.com 在使用中遇到问题或发现bug更或者有技术交流爱好的朋友请发邮件到我的email，大家一起学习，一起进步！ * * * 初始化调用方法 在js的onload事件或jq的$(document).ready()里面调用stepBar.init(id,option)即可。 * 第一个参数为stepBar容器的id，必填，允许传入的值包括如下： * jQuery对象 * javascript对象 * DOM元素（可转化为ID的字符串，如 “stepBar” || “#stepBar”） 纠错：误把jQuery对象的“#”写成“.”也同样能识别出来，但是必须保证次参数能转化成元素ID * 第二个参数为一个对象直接量，选填，包含如下的零个或多个 * step string number 目标进度 默认为1（第一步），选填 * change boolean 设置插件是否可被操作，选填 默认false * animation boolean 设置插件是否采用动画形式（前提stepBar.change为true），选填 默认false * speed number 动画速度（前提，change和animation为true） 选填 默认1000ms * stepEasingForward string 从当前步数往前过渡动画（前提，change和animation为true） 选填 默认 "easeOutExpo" 更多参数请参照 jquery.easing.js * stepEasingBackward string 从当前步数往后过渡动画（前提，change和animation为true） 选填 默认 "easeOutElastic" 更多参数请参照 jquery.easing.js * * PS：不合法的参数将强行使用默认值 */
var stepBar ={
	bar:{
}
,item:{
}
,barWidth:0,itemCount:2,itemWidth:0,processWidth:0,curProcessWidth:0,step:1,curStep:0,triggerStep:1,change:false,animation:false,speed:1000,stepEasingForward:"easeOutCubic",stepEasingBackward:"easeOutElastic",init:function(id,option){
	if (typeof id == "object" || id.indexOf("#") == 0){
	this.bar = $(id);
}
else{
	if (id.indexOf(".") == 0){
	id = id.substring(1,id.length);
}
this.bar = $("#" + id);
}
this.change = option.change ? true:false;
	this.animation = this.change && option.animation ? true:false;
	this.layout();
	this.item = this.bar.find(".ui-stepInfo");
	if (this.item.length < 2){
	return;
}
this.bar.show();
	this.itemCount = this.item.length;
	this.step = !isNaN(option.step) && option.step <= this.itemCount && option.step > 0 ? option.step:1;
	this.triggerStep = this.step;
	if (!isNaN(option.speed) && option.speed > 0){
	this.speed = parseInt(option.speed);
}
this.stepEasing(option.stepEasingForward,false);
	this.stepEasing(option.stepEasingBackward,true);
	this.stepInfoWidthFun();
}
,stepEasing:function(stepEasing,backward){
	if(typeof jQuery.easing[stepEasing] === "function"){
	if(backward){
	this.stepEasingBackward = stepEasing;
}
else{
	this.stepEasingForward = stepEasing;
}
}
}
,layout:function(){
	this.bar.find(".ui-stepInfo .ui-stepSequence").addClass("judge-stepSequence-hind");
	this.bar.find(".ui-stepInfo:first-child .ui-stepSequence").addClass("judge-stepSequence-pre");
}
,classHover:function(){
	if(this.change){
	this.bar.find(".ui-stepInfo .judge-stepSequence-pre").removeClass("judge-stepSequence-hind-change").addClass("judge-stepSequence-pre-change");
	this.bar.find(".ui-stepInfo .judge-stepSequence-hind").removeClass("judge-stepSequence-pre-change").addClass("judge-stepSequence-hind-change");
}
}
,stepInfoWidthFun:function(){
	if(this.itemCount > 0){
	this.barWidth = this.bar.width();
	this.itemWidth = Math.floor((this.barWidth * 0.9) / (this.itemCount - 1));
	this.bar.find(".ui-stepLayout").width(Math.floor(this.barWidth * 0.9 + this.itemWidth));
	this.item.width(this.itemWidth);
	this.bar.find(".ui-stepLayout").css({
	"margin-left":-Math.floor(this.itemWidth / 2) + 10}
);
	if(this.change){
	this._event();
}
this.percent();
}
}
,_event:function(){
	var _this = this;
	_this.bar.on("click",".ui-stepSequence",function(){
	var triggerStep = $(this).text();
	if(!isNaN(parseInt(triggerStep)) && triggerStep > 0 && triggerStep <= _this.itemCount && triggerStep != _this.curStep){
	_this.triggerStep = triggerStep;
	_this.percent();
}
}
);
}
,percent:function(){
	var _this = this;
	var calc = 100 / (_this.itemCount - 1);
	_this.processWidth = calc * (_this.triggerStep - 1) + "%";
	if(_this.animation){
	if(_this.triggerStep < _this.curStep){
	_this._animate();
	_this.curStep--;
}
else{
	_this.curStep++;
}
_this.curProcessWidth = calc * (_this.curStep - 1) + "%";
	_this.bar.find(".ui-stepProcess").stop(true).animate({
	"width":_this.curProcessWidth}
,_this.speed,function(){
	_this._animate();
	if(_this.processWidth != _this.curProcessWidth){
	_this.percent();
}
}
);
}
else{
	if(_this.curProcessWidth != _this.processWidth){
	_this.curProcessWidth = _this.processWidth;
	_this.bar.find(".ui-stepProcess").width(_this.processWidth);
	_this.jump();
}
}
}
,jump:function(){
	this.bar.find(".ui-stepInfo .ui-stepSequence").removeClass("judge-stepSequence-pre").addClass("judge-stepSequence-hind");
	this.bar.find(".ui-stepInfo:nth-child(-n+" + this.triggerStep + ") .ui-stepSequence").removeClass("judge-stepSequence-hind").addClass("judge-stepSequence-pre");
	this.classHover();
}
,_animate:function(){
	var stepSequence_size ={
}
,easing = this.stepEasingBackward,preClass,hindClass;
	if(this.triggerStep < this.curStep){
	stepSequence_size.padding = "6px 10px";
	preClass = "judge-stepSequence-pre";
	hindClass = "judge-stepSequence-hind";
	easing = this.stepEasingForward;
}
else{
	stepSequence_size.padding = "8px 12px";
	preClass = "judge-stepSequence-hind";
	hindClass = "judge-stepSequence-pre";
}
this.bar.find(".ui-stepInfo:nth-child(" + this.curStep + ") .ui-stepSequence").removeClass(preClass).addClass(hindClass);
	this.bar.find(".ui-stepInfo:nth-child(" + this.curStep + ") .ui-stepSequence").animate(stepSequence_size,500,easing);
	this.classHover();
}
}
;

CSS代码(control.css):

@charset "utf-8";*{padding:0;margin:0;}
.ui-stepBar-wrap{position:relative;width:100%;height:130px;background:#ebeef3;overflow:hidden;display:none;z-index:100;}
.ui-stepBar-wrap .ui-stepBar{position:relative;width:90%;height:5px;background:#cccccc;top:50px;left:5%;z-index:101;}
.ui-stepBar-wrap .ui-stepBar .ui-stepProcess{position:relative;width:0;height:5px;background:#516784;top:0;left:0;z-index:102;}
.ui-stepBar-wrap .ui-stepInfo-wrap{width:90%;margin:0 auto;height:100%;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo{position:relative;float:left;padding-top:36px;text-align:center;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .ui-stepSequence{position:relative;padding:4px 8px;border-radius:50%;z-index:103;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .ui-stepName{position:relative;line-height:50px;z-index:103;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .judge-stepSequence-pre-change,.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .judge-stepSequence-hind-change{cursor:pointer;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .judge-stepSequence-pre-change:hover{box-shadow:0 0 3px 1px #516784;}
.ui-stepBar-wrap .ui-stepInfo-wrap .ui-stepInfo .judge-stepSequence-hind-change:hover{box-shadow:0 0 3px 1px #cccccc;}
.judge-stepSequence-pre{background:#516784;color:#ffffff;}
.judge-stepSequence-hind{background:#cccccc;color:#000000;}
.author{position:absolute;bottom:0;width:100%;text-align:center;margin:40px auto;color:#1569ec;text-shadow:1px 1px 0 #e7e7e7,0 1px 7px #fff;}

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