jquery css實(shí)現(xiàn)流程進(jìn)度條
更新時(shí)間：2020年03月26日 09:51:08 作者：逍遙狼
這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)流程進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery css實(shí)現(xiàn)流程進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下
方案1：
方案2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流程進(jìn)度條</title>
<style type="text/css">
.div_home{
width: 100%;
height: 720px;
background: pink;
}
.div_button{
width: 100%;
background: rgba(249, 214, 81, 1);
text-align: center;
}
:root {
--progress_div-height: 100px;
--progress_div-width: 100%;
--progress_div-background: rgba(204,232,207,1);
--progress_line-top: 50px;
--progress_line-height: 4px;
--progress_node-height: 20px;
--progress_node-width: 20px;
--progress_node-top: -8px;
--progress_node-lineHeight: 20px;
--progress_text-heigth: 20px;
--progress_text-width: 120px;
--progress_text-top: -30px;
--progress_color-yes: rgba(40 ,200 ,252 ,1);
--progress_color-no: rgba(213 ,213 ,213 ,1);
}
.progress_div{
height: var(--progress_div-height);
width: var(--progress_div-width);
background: var(--progress_div-background);
text-align: center;
margin: auto 0;
}
/*灰條樣式*/
.progress_line_no{
position: relative;
top: var(--progress_line-top);
height: var(--progress_line-height);
background: var(--progress_color-no);
}
/*藍(lán)條樣式*/
.progress_line_yes{
height: var(--progress_line-height);
background: var(--progress_color-yes);
}
/*未激活節(jié)點(diǎn)樣式*/
.progress_node_no{
position: absolute;
border-radius: 100%;
width: var(--progress_node-width);
height: var(--progress_node-height);
top: var(--progress_node-top);
line-height: var(--progress_node-lineHeight);
background: var(--progress_color-no);
color: var(--progress_color-no);
}
/*已激活節(jié)點(diǎn)樣式*/
.progress_node_yes{
position: absolute;
border-radius: 100%;
width: var(--progress_node-width);
height: var(--progress_node-height);
top: var(--progress_node-top);
line-height: var(--progress_node-lineHeight);
background: var(--progress_color-yes);
color: var(--progress_color-yes);
}
/*節(jié)點(diǎn)文字*/
.progress_text{
position: absolute;
vertical-align: middle;
text-align: center;
width: var(--progress_text-width);
height: var(--progress_text-heigth);
top: var(--progress_text-top);
}
/*當(dāng)前激活節(jié)點(diǎn)標(biāo)記*/
.progress_node_currentActive{
}
</style>
</head>
<body>
<div class="div_home">
<div class="progress_div">
<div class="progress_line_no">
<div class="progress_line_yes">
<div>
<div class="progress_text">1</div>
</div>
<div>
<div class="progress_text">2</div>
</div>
<div>
<div class="progress_text">3</div>
</div>
<div class="progress_node_currentActive">
<div class="progress_text">4</div>
</div>
<div>
<div class="progress_text">5</div>
</div>
</div>
</div>
</div>
<div class="div_button">
<input type="button" οnclick="skipNode(-1)" value="上一步">
<input type="button" οnclick="skipNode(1)" value="下一步">
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//傳入灰條長度,傳入最后一個(gè)激活節(jié)點(diǎn)下標(biāo)
loadProgress(1000 ,2);
});
//上一步type=-1,下一步type=1
function skipNode(type){
var currentNum = 0;
var countNum = $('.progress_line_no > .progress_line_yes > div').length;
//獲取當(dāng)前激活節(jié)點(diǎn)的下標(biāo)
$('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
if($(data).hasClass('progress_node_currentActive') == true){
currentNum = i;
}
});
//當(dāng)前為first,上一步無效;當(dāng)前為last,下一步無效
if((type == -1 && currentNum == 0) || (type == 1 && currentNum == countNum - 1)){
return;
}
//重新設(shè)置激活節(jié)點(diǎn)標(biāo)記
$('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
$(data).removeClass();
if(type == -1 && currentNum - 1 == i){
$(data).addClass('progress_node_currentActive');
}
if(type == 1 && currentNum + 1 == i){
$(data).addClass('progress_node_currentActive');
}
});
//重新載入流程進(jìn)度條樣式(傳入原進(jìn)度條長度)
loadProgress($('.progress_line_no').width());
}
//加載流程進(jìn)度條,inLineWidth進(jìn)度條長度,inCurrentNum最后一個(gè)激活節(jié)點(diǎn)下標(biāo)(從0開始到length-1)
function loadProgress(inLineWidth ,inCurrentNum){
var countNum = $('.progress_line_no > .progress_line_yes > div').length;//總節(jié)點(diǎn)數(shù)
var currentNum;//當(dāng)前激活節(jié)點(diǎn)下標(biāo)
//當(dāng)前激活節(jié)點(diǎn)優(yōu)先級(jí):loadProgress()方法傳入為最高級(jí)別,其次是div上class="progress_node_currentActive",最后默認(rèn)0
if(inCurrentNum != undefined && inCurrentNum > -1 && inCurrentNum < countNum){
//傳入的節(jié)點(diǎn)正確取傳入的節(jié)點(diǎn)為當(dāng)前激活節(jié)點(diǎn)
currentNum = inCurrentNum;
} else {
//存入的節(jié)點(diǎn)不正確,根據(jù)節(jié)點(diǎn)上的progress_node_currentActive設(shè)置當(dāng)前激活節(jié)點(diǎn)
$('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
if($(data).hasClass('progress_node_currentActive') == true){
currentNum = i;
}
});
}
if(currentNum == undefined){
//未傳入節(jié)點(diǎn)或傳入的節(jié)點(diǎn)不正確 且div上沒發(fā)現(xiàn)progress_node_currentActive標(biāo)識(shí),設(shè)置當(dāng)前激活節(jié)點(diǎn)為0
currentNum = 0;
}
var line_width_no = inLineWidth;//灰條長度
var line_width_yes;//藍(lán)條長度
var node_distance = line_width_no / (countNum - 1);//兩點(diǎn)間距
var node_mid_distance = node_distance / 2;//兩點(diǎn)中距(間距/2)
$('.progress_line_no').width(line_width_no + 'px');//設(shè)置灰條長度
$('.progress_line_no').css('left' ,($('.progress_line_no').parent().width() - line_width_no) / 2 + 'px');//設(shè)置灰條相對于父級(jí)div居中偏移
//設(shè)置節(jié)點(diǎn)和文字
$('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
$(data).removeClass();//移除所有樣式
//設(shè)置當(dāng)前激活節(jié)點(diǎn)為progress_node_currentActive
if(currentNum == i){
$(data).addClass('progress_node_currentActive');
}
if(i == 0){
//設(shè)置first節(jié)點(diǎn)
$(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
}else if(i <= currentNum){
//設(shè)置激活節(jié)點(diǎn)
$(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
}else{
//設(shè)置未激活節(jié)點(diǎn)
$(data).addClass('progress_node_no').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
}
//設(shè)置文字偏移位置
$(data).children().css('left' ,-($(data).children().width() / 2) + 10+'px');
});
/*方案1,計(jì)算藍(lán)條長度
*/
line_width_yes = line_width_no * currentNum / (countNum - 1);
/*方案2,計(jì)算藍(lán)條長度
if(currentNum == 0){
//first節(jié)點(diǎn)為progress_node_currentActive時(shí)藍(lán)條長度
line_width_yes = node_mid_distance * 1;
}else if(currentNum == countNum - 1){
//last節(jié)點(diǎn)為progress_node_currentActive時(shí)藍(lán)條長度
line_width_yes = node_mid_distance * (countNum - 1) * 2;
}else{
//中間節(jié)點(diǎn)為progress_node_currentActive時(shí)藍(lán)條長度
line_width_yes = node_mid_distance * (currentNum * 2 + 1);
}
*/
//設(shè)置藍(lán)條長度
$('.progress_line_yes').width( line_width_yes + 'px');
}
</script>
</body>
</html>
使用：
1.首先要引入一個(gè)jquery.js
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
2.CSS：
:root開始所有css(css基本上都使用的變量，改樣式只需要改:root里的變量值就行)
3.JS：
保留所有js方法
調(diào)用loadProgress(1000,2)方法，傳入進(jìn)度條長度、最后一個(gè)激活節(jié)點(diǎn)下標(biāo)(0到節(jié)點(diǎn)的length-1)
186行設(shè)置了整體相對于父級(jí)div居中，自己看需求改一下就好
4.標(biāo)簽：
主要就是class="progress_line_no"的div里的所有元素,最里面的兩層div就是節(jié)點(diǎn),class="progress_text"的div是文字,它們的父級(jí)div是圓點(diǎn)
5.激活節(jié)點(diǎn)優(yōu)先級(jí)
loadProgress(width,index)方法傳入index為最高級(jí)別,其次是div上class="progress_node_currentActive",最后默認(rèn)0
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery圖片拖動(dòng)組件Dropzone用法示例
這篇文章主要介紹了jQuery圖片拖動(dòng)組件Dropzone用法,結(jié)合實(shí)例形式分析了圖片拖動(dòng)組件Dropzone的功能、安裝及具體使用方法,需要的朋友可以參考下2017-01-01
jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法,涉及jQuery結(jié)合animate方法動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
寫網(wǎng)頁的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來同id的網(wǎng)頁元素，下面貼出來代碼，如何利用jQuery對這些元素進(jìn)行逐一遍歷并可響應(yīng)消息2012-06-06
jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒
XSS指的是跨站腳本攻擊,比如人們常說的向$傳入字符串或者字符串轉(zhuǎn)換可執(zhí)行函數(shù)等一些安全方面值得注意的細(xì)節(jié),下面就為大家整理了jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒2016-05-05
使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
這篇文章主要介紹了使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素,需要的朋友可以參考下2014-05-05
jquery按回車提交數(shù)據(jù)的代碼示例，很簡單的一個(gè)方法，看一下就明白2013-11-11
這篇文章主要介紹了jquery與json的結(jié)合，分為三個(gè)階段,設(shè)計(jì)htm頁面,使用jQuery編寫AJAX請求文件，感興趣的小伙伴們可以參考一下2016-01-01
JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
當(dāng)鼠標(biāo)停留在表頭邊框線上，接著拖動(dòng)鼠標(biāo)，會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線，最后放開鼠標(biāo)，表格列寬會(huì)被調(diào)整2014-09-09
jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼,通過jQuery響應(yīng)鼠標(biāo)事件遍歷頁面元素實(shí)現(xiàn)伸縮菜單的效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09
JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例沒使用JQuery UI的autocomplete插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01