溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用jquery怎么實現一個步驟進度軸插件？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
代碼部分
*{
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" >步驟1</div>
<div class="box" id="box2" >步驟2</div>
<div class="box" id="box3" >步驟3</div>
<div class="box" id="box4" >步驟4</div>
<div class="box" id="box5" >步驟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'));
//執行對應的方法
click();
})
click();
function click(){
//回調
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;
}
}jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
關于使用jquery怎么實現一個步驟進度軸插件問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
