jquery css 프로 세 스 진행 바 실현

9252 단어 jquery진도 표
본 논문 의 사례 는 jquery css 가 절차 진도 항목 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
프로젝트 1:

프로젝트 2:

<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<title>     </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);
 }
 /*    */
 .progress_line_yes{
 height: var(--progress_line-height);
 background: var(--progress_color-yes);
 }
 /*       */
 .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);
 }
 /*       */
 .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);
 }
 /*    */
 .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);
 }
 /*        */
 .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(){
 //      ,            
 loadProgress(1000 ,2);
 });
 
 //   type=-1,   type=1
 function skipNode(type){
 var currentNum = 0;
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;
 //           
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 //   first,     ;   last,     
 if((type == -1 && currentNum == 0) || (type == 1 && currentNum == countNum - 1)){
 return;
 }
 //          
 $('.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');
 }
 });
 //           (        )
 loadProgress($('.progress_line_no').width());
 }
 
 //       ,inLineWidth     ,inCurrentNum          ( 0   length-1)
 function loadProgress(inLineWidth ,inCurrentNum){
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;//    
 var currentNum;//        
 
 //         :loadProgress()         ,   div class="progress_node_currentActive",    0
 if(inCurrentNum != undefined && inCurrentNum > -1 && inCurrentNum < countNum){
 //                    
 currentNum = inCurrentNum;
 } else {
 //        ,      progress_node_currentActive        
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 }
 if(currentNum == undefined){
 //                div    progress_node_currentActive  ,         0
 currentNum = 0;
 }
 
 var line_width_no = inLineWidth;//    
 var line_width_yes;//    
 var node_distance = line_width_no / (countNum - 1);//    
 var node_mid_distance = node_distance / 2;//    (  /2)
 
 $('.progress_line_no').width(line_width_no + 'px');//      
 $('.progress_line_no').css('left' ,($('.progress_line_no').parent().width() - line_width_no) / 2 + 'px');//         div    
 
 //       
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 $(data).removeClass();//      
 //         progress_node_currentActive
 if(currentNum == i){
 $(data).addClass('progress_node_currentActive');
 }
 if(i == 0){
 //  first  
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else if(i <= currentNum){
 //      
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else{
 //       
 $(data).addClass('progress_node_no').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }
 //        
 $(data).children().css('left' ,-($(data).children().width() / 2) + 10+'px');
 });
 
 /*  1,      
 */
 line_width_yes = line_width_no * currentNum / (countNum - 1);
 
 /*  2,      
 if(currentNum == 0){
 //first   progress_node_currentActive     
 line_width_yes = node_mid_distance * 1;
 }else if(currentNum == countNum - 1){
 //last   progress_node_currentActive     
 line_width_yes = node_mid_distance * (countNum - 1) * 2;
 }else{
 //     progress_node_currentActive     
 line_width_yes = node_mid_distance * (currentNum * 2 + 1);
 }
 */
 
 //      
 $('.progress_line_yes').width( line_width_yes + 'px');
 }
</script>
</body>
 
</html>
사용:
1.먼저 jquery.js 를 도입 해 야 합 니 다.

2.CSS:
:root 시작 모든 css(css 에서 기본적으로 사용 하 는 변수 입 니 다.스타일 을 바 꾸 려 면:root 의 변수 값 만 바 꾸 면 됩 니 다)
3.JS:
모든 js 방법 유지
loadProgress(1000,2)방법 을 호출 하여 진도 바 길이,마지막 활성화 노드 아래 표 시 를 입력 합 니 다(0 에서 노드 의 length-1)
186 줄 은 전체 적 으로 아버지 급 div 에 비해 중간 에 설 치 했 습 니 다.자신 이 원 하 는 것 을 보고 고치 면 됩 니 다.
4.태그:
주로 class="progressline_no"의 div 에 있 는 모든 요소,가장 안쪽 에 있 는 2 층 div 는 노드 입 니 다.class="progresstext"의 div 는 문자 입 니 다.부모 급 div 는 원점 입 니 다.
5.노드 우선 순위 활성화
loadProgress(width,index)방법 은 index 에 들 어 가 는 것 이 최고 단계 이 고,그 다음은 div 상 class="progress"입 니 다.node_currentActive",마지막 기본 값 0
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기