1. 首页
  2. 问答
  3. 我希望进度条在视口中填充或变空，但只有一次

我希望进度条在视口中填充或变空，但只有一次

2017-10-12 55 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

相关问题

 相关问题