jquery 步驟進度軸插件的實現(xiàn)代碼

更新時間：2021年05月17日 11:54:57 作者：阿飛超努力

今天給大家分享一個jquery插件之步驟進度軸的實現(xiàn)思路，這個功能在一些網(wǎng)站注冊賬號時一般都會用到，今天就通過實例代碼給大家詳細介紹下，感興趣的朋友跟隨小編一起看看吧

每天一個jquery插件-步驟進度軸步驟進度軸

很多工具型的網(wǎng)站入門教程或者注冊賬號走流程的時候會有這個結(jié)構(gòu)存在，所以做了一個來嘗試一下，回調(diào)動作也能用吧

效果如下

在這里插入圖片描述

代碼部分

*{
	margin: 0;
	padding: 0;
}
#div{
	width: 90%;
	height: 50px;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
#box{
	width: 90%;
	height: 100px;
	border: 1px solid lightgray;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	color: white;
}
.tbar{
	width: 90%;
	height: 6px;
	border-radius: 5px;
	background-color: lightgray;
	display: flex;
	align-items: center;
	position: absolute;
}
.bar{
	width: 100%;
	height: 50%;
	border-radius: 5px;
	background-color: #1abc9c;
	transition: all 0.2s linear;
}
.dot{
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: lightgray;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dot:hover{
	transition: all 0.5s linear;
	background-color: #1abc9c;
}
.dot.check{
	background-color: #1abc9c;
}
.dot .txt{
	top: 100%;
	font-size: 12px;
	position: absolute;
	width: 100px;
	text-align: center;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>步驟進度軸</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bzjdz.js"></script>
		<link href="css/bzjdz.css" rel="external nofollow"  rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="div">
			
		</div>
		<div id="box">
			<div class="box" id="box1" style="background-color: #1abc9c;">步驟1</div>
			<div class="box" id="box2" style="background-color: #3498db;">步驟2</div>
			<div class="box" id="box3" style="background-color: #f1c40f;">步驟3</div>
			<div class="box" id="box4" style="background-color: #e74c3c;">步驟4</div>
			<div class="box" id="box5" style="background-color:	#9b59b6;">步驟5</div>
		</div>
	</body>
</html>
<script>
	$(function(){
		$("#div").timeline({
			data:[
				{name:'步驟1',id:'#box1',click:hide},
				{name:'步驟2',id:'#box2',click:hide},
				{name:'步驟3',id:'#box3',click:hide},
				{name:'步驟4',id:'#box4',click:hide},
				{name:'步驟5',id:'#box4',click:hide},
			]
		})
	})
	function hide(item){
		$(".box").hide();
		$(item.id).show();
	}
</script>

$.prototype.timeline =function(op){
	console.log(op.data);
	var $that = $(this);
	var $tbar =$("<div class='tbar'></div>");
	var $bar  =$("<div class='bar'></div>");
	$bar.appendTo($tbar)
	$tbar.appendTo($that);
	var length = op.data.length;//元素長度
	var index = 0;//當前進行到哪個步驟
	op.data.forEach((item,index)=>{
		var per = getper(index,length)
		var $dot  = $("<div class='dot' data-index='"+index+"'><div class='txt'>"+item.name+"</div></div>");
		$dot.appendTo($tbar);
		$dot.css('left',"calc("+per+"% - 6px)")
	})
	//點擊事件
	$that.find('.dot').click(function(){
		index = parseInt($(this).attr('data-index'));
		//執(zhí)行對應(yīng)的方法
		click();
	})
	click();
	function click(){
		//回調(diào)
		var item = op.data[index];
		item.click(item);
		//動畫樣式
		var per = getper(index,length)
		$bar.css('width',per+'%')
		//按鈕選中的控制
		op.data.forEach((item,i)=>{
			if(i<=index){
				$tbar.find(".dot[data-index='"+i+"']").addClass('check');
			}else{
				$tbar.find(".dot[data-index='"+i+"']").removeClass('check');
			}
		})
	}
	function getper(i,l){
		var temp = 0;
		if(i!=0&&i!=l-1){
			temp = i/(l-1)*100//算出大概的距離
		}else if(i==l-1){
			temp = 100
		}
		return temp;
	}
}

思路解釋

要做的內(nèi)容很簡單，畫出時間軸，標記對應(yīng)的點，然后在觸發(fā)對應(yīng)事件的時候正確調(diào)用回調(diào)
時間軸畫的時候就那樣，百分比一填滿就沒啥了，然后里面把會變化進度的和校園點分開繪制
小圓點點擊的時候改變當前結(jié)構(gòu)標記，然后觸發(fā)一個事件，把動畫效果和回調(diào)一并執(zhí)行、
完事，休息

以上就是jquery 步驟進度軸插件的實現(xiàn)代碼的詳細內(nèi)容，更多關(guān)于jQuery步驟進度軸的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: