1. 首頁
  2. 問答
  3. 我希望進度條在視口中填充或變空，但只有一次

我希望進度條在視口中填充或變空，但只有一次

2017-10-12 86 views
0

我已經完成了一些工作，並以某種方式設法將動畫放入進度條中。我在代碼中添加了wow.min.js和animate.css文件。進度條工作正常......增加批次僅工作一次，所有5個小節......但是每次滾動窗口時都會發生減少批次。如何克服這個??我不知道爲什麼它不在這裏工作，js在我的系統中工作正常。如果有人能指導有點...我希望進度條在視口中填充或變空，但只有一次

$.fn.isInViewport = function() { 
 
var elementTop = $(this).offset().top; 
 
var elementBottom = elementTop + $(this).outerHeight(); 
 
var viewportTop = $(window).scrollTop(); 
 
var viewportBottom = viewportTop + $(window).height(); 
 
return elementBottom > viewportTop && elementTop < viewportBottom; 
 
}; 
 
$(window).on('resize scroll', function() { 
 
$(".progress-bar-fill").css({"width":"100%","transition":"5s"}); 
 
$(".progress-bar-fill2").each((i, el) => { 
 
\t var jel = $(el) 
 
\t jel.css({"width": '100%',"transition":"0s"}); 
 
\t 
 
\t setTimeout(() => { 
 
\t \t console.log(jel.attr('data-val'), {"width": jel.attr('data-val') + '%',"transition":"5s"}) 
 
\t \t jel.css({"width": jel.attr('data-val') + '%',"transition":"5s"}) 
 
\t \t 
 
\t }, 0) 
 
}) 
 
});
.progress-bar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #e0e0e0; 
 
    
 
} 
 

 
.progress-bar-fill { 
 
    display: block; 
 
    height: 50px; 
 
    background: #659cef; 
 
\t float:left; 
 
    
 
    /*transition: width 250ms ease-in-out;*/ 
 
    transition: width 5s ease-in-out; 
 
} 
 
.progress-bar2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #ffffff; 
 
    
 
} 
 

 
.progress-bar-fill2 { 
 
    display: block; 
 
    height: 50px; 
 
    background: #659cef; 
 
\t float:left; 
 
    
 
    
 
}
<div class="container" style=" align-center margin: auto; height: 750px;"> 
 
\t 
 
     
 
\t <center><div class="container" style="width:50%; background-color:#ffffff; float: left; height: auto;"> 
 
\t 
 
     
 
\t \t <h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black"> 
 
      </br>Increases 
 
     </h3> 
 

 
     <div class="progress_elements" style="width:80%"> 
 
      <div class="progress1 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Internal Customer Satisfaction</b> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
       <div class="progress-bar wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
      
 
\t \t \t <div class="progress2 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Reporting Platform Capability</b> 
 
         </p> 
 
        </div> 
 
       
 
       </div> 
 
       <div class="progress-bar wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
      
 
      <div class="progress3 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Custom Metrics Table Capability</b> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
       <div class="progress-bar wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
      
 
      <div class="progress4"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Advanced Business Analysis Capability</b> 
 
         </p> 
 
        </div> 
 
       
 
       </div> 
 
       <div class="progress-bar wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
\t \t \t 
 
\t \t \t </br><div class="progress5 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Data Profiling Capability</b> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
       <div class="progress-bar wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
      
 
     </div> 
 
\t \t 
 
\t </div></center> 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <center><div class="container" style="width:50%; background-color: #dddddd; float: right; height:auto;"> 
 
\t \t 
 
\t \t <h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black"> 
 
      </br>Decreases 
 
     </h3> 
 

 
     <div class="progress_elements" style="width: 80%; "> 
 
      
 
\t \t \t <div class="progress1 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Initial Cost</b> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
       <div class="progress-bar2 wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill2" data-val="20" style="width: 10%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
\t \t \t 
 
\t \t \t <div class="progress2 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Reoccurring Cost</b> 
 
         </p> 
 
        </div> 
 
       
 
       </div> 
 
       <div class="progress-bar2 wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill2" data-val="0" style="width: 0%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
      
 
      <div class="progress3 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Implementation Time</b> 
 
         </p> 
 
        </div> 
 
        
 
       <div class="progress-bar2 wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill2" data-val="10"style="width: 20%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
\t \t \t </div> 
 
      
 
      <div class="progress4"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>Reporting Dev Cost/Time</b> 
 
         </p> 
 
        </div> 
 
       
 
       </div> 
 
       <div class="progress-bar2 wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill2" data-val="30"style="width: 8%;"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
\t \t \t 
 
\t \t \t </br><div class="progress5 pb-5"> 
 
       <div class="title-wrap"> 
 
        <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp"> 
 
         <p> 
 
          <b>IT Request</b> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
       <div class="progress-bar2 wow slideInUp"> 
 
\t \t \t \t \t <span class="progress-bar-fill2" data-val="08" style="width: 10%"></span> 
 
\t \t \t \t </div> 
 
      </div> 
 
\t \t \t 
 
      
 
     </div> 
 
\t \t 
 
\t </div></center> 
 
\t 
 
\t 
 

 
\t \t 
 
    </div> 
 
\t 
 
\t </div>

<div class="progress1 pb-5"> 
 
        <div class="title-wrap"> 
 
         <div class="progressbar-title mbr-fonts-style display-7"> 
 
          <p> 
 
           Initial Cost 
 
          </p> 
 
         </div> 
 
         <div class="progress_value mbr-fonts-style display-7"> 
 
          
 
          
 
         </div> 
 
        </div> 
 
        <progress class="progress progress-primary" max="100" value="15" style="width:100%"> 
 
        </progress> 
 
    </div> 
 
    
 

 
<div class="progress1 pb-5"> 
 
        <div class="title-wrap"> 
 
         <div class="progressbar-title mbr-fonts-style display-7"> 
 
          <p> 
 
           Internal Customer Satisfaction 
 
          </p> 
 
         </div> 
 
         
 
        </div> 
 
        <progress class="progress progress-primary" max="100" value="100" style="width:100%"> 
 
        </progress> 
 
    </div>

來源

2017-10-12 Megha Verma

+0

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） ，無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

+0

@Paulie_D ...女士，我曾試圖自己做幾個小時，但無法做到這一點。這就是爲什麼我在這裏發佈我的問題。 –

回答

0

這可能有用

function move() { 
 
    var elem1 = document.getElementById("myBar1"); 
 
    var elem2 = document.getElementById("myBar2"); 
 
    var width = 30; 
 
    var id = setInterval(frame, 10); 
 
    function frame() { 
 
    if (width >= 100) { 
 
     clearInterval(id); 
 
    } else { 
 
     width++; 
 
     elem1.style.width = width + '%'; 
 
     if(width<70) 
 
     { 
 
       elem2.style.width =(100 - width) + '%'; 
 
     
 
     } 
 
    } 
 
    } 
 
}
#myProgress1,#myProgress2 { 
 
    width: 100%; 
 
    background-color: #ddd; 
 
} 
 

 
#myBar1{ 
 
    width: 30%; 
 
    height: 30px; 
 
    background-color: #4CAF50; 
 
} 
 

 
#myBar2 { 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: #4CAF50; 
 
}
<div id="myProgress1"> 
 
    <div id="myBar1"></div> 
 
</div> 
 
<br/> 
 
<div id="myProgress2"> 
 
    <div id="myBar2"></div> 
 
</div> 
 
<br/> 
 
<button onclick="move()">Click Me</button>

或者你也可以你的進度控制也。

var elem1 = document.getElementById("progress1"); 
 
    var elem2 = document.getElementById("progress2"); 
 
    var width = 30; 
 
    var id = setInterval(frame, 30); // adjust the speed of animation 
 
    function frame() { 
 
    if (width >= 100) { 
 
     clearInterval(id); 
 
    } else { 
 
     width++; 
 
     elem1.value = width ; 
 
     if(width<70)  
 
     { 
 
       elem2.value =(100 - width) ; 
 
     
 
     } 
 
    } 
 
    }
<div class="title-wrap"> 
 
    <div class="progressbar-title mbr-fonts-style display-7"> 
 
    <p> 
 
     Initial Cost 
 
    </p> 
 
    </div>     
 
</div> 
 

 
<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress> 
 
<div class="title-wrap"> 
 
    <div class="progressbar-title mbr-fonts-style display-7"> 
 
    <p> 
 
     Internal Customer Satisfaction 
 
    </p> 
 
    </div>     
 
</div> 
 
<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress> 
 
<br/>

來源

2017-10-12 10:29:19

0

先放id="progress1"和id="progress2"在進度標記，如下所示：

<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress> 

<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress>

然後添加JavaScript代碼如下：

<script> 
    var progress1 = document.getElementById("progress1"); 
    var progress2 = document.getElementById("progress2"); 

    progress1.value = "100"; 
    progress2.value = "30"; 
</script>

你可以操縱ŧ他根據某個事件取得值。

來源

2017-10-12 10:31:51 hirakJS

0

你需要js腳本來做這些更新。

正如例子 - 在這裏初始成本更新的+ 1％每秒進度條

(function(){ 
 
    var action = function(){ 
 
    var initialCostProgressValue = $("#initial-cost").val(); 
 
    
 
    if(initialCostProgressValue >= 100){ 
 
     clearInterval(pbInterval); 
 
     return; 
 
    } 
 
    
 
    $("#initial-cost").val($("#initial-cost").val() + 1);  
 
    
 
    }; 
 
    var pbInterval = setInterval(function() { 
 
    action(); 
 
    }, 1500); 
 
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress1 pb-5"> 
 
        <div class="title-wrap"> 
 
         <div class="progressbar-title mbr-fonts-style display-7"> 
 
          <p> 
 
           Initial Cost 
 
          </p> 
 
         </div> 
 
         <div class="progress_value mbr-fonts-style display-7"> 
 
          
 
          
 
         </div> 
 
        </div> 
 
        <progress id="initial-cost" class="progress progress-primary" max="100" value="15" style="width:100%"> 
 
        </progress> 
 
    </div> 
 
    
 

 
<div class="progress1 pb-5"> 
 
        <div class="title-wrap"> 
 
         <div class="progressbar-title mbr-fonts-style display-7"> 
 
          <p> 
 
           Internal Customer Satisfaction 
 
          </p> 
 
         </div> 
 
         
 
        </div> 
 
        <progress id="initernal-customer-satisfaction" class="progress progress-primary" max="100" value="100" style="width:100%"> 
 
        </progress> 
 
    </div>

來源

2017-10-12 10:32:37 DanilGholtsman

相關問題

 相關問題