圈進度條不斷循環

我有一個圓形的進步腳本在這裏找到：http://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/圈進度條不斷循環

我把它添加到我的網站，事情是，我周圍的頁面中間的這些元件（未考慮當頁面加載）。我的目的是在用戶向下滾動到該位置時顯示動畫，但是該效果在每個滾動上都保持循環。如何讓元素只能在元素進入視圖時運行一次，並防止循環和/或重新啓動？

這裏是我到目前爲止的代碼： http://jsfiddle.net/1f58u1o5/1/

CSS

.progressbar { 
    display: inline-block; 
    width: 100px; 
    margin: 25px; 
} 

.circle { 
    width: 100%; 
    margin: 0 auto; 
    margin-top: 10px; 
    display: inline-block; 
    position: relative; 
    text-align: center; 
} 

.circle canvas { vertical-align: middle; } 

.circle div { 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    line-height: 40px; 
    font-size: 20px; 
} 

.circle strong i { 
    font-style: normal; 
    font-size: 0.6em; 
    font-weight: normal; 
} 

.circle span { 
    display: block; 
    color: #aaa; 
    margin-top: 12px; 
}

HTML

<div style="width:100%;height:500px;"></div> 
<h3>Sed scelerisque</h3> 
<div class="progressbar"> 
    <div class="circle" data-percent="98"><div></div><p>Quisque's</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="30"><div></div><p>Maecenas</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="77"><div></div><p>Pellentesque</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="49"><div></div><p>Etiam sodales</p></div> 
</div> 
<div style="width:100%;height:500px;"></div>

的JavaScript

$(document).ready(function($){ 
    function animateElements(){ 
     $('.progressbar').each(function(){ 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent  = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      if(elementPos<topOfWindow+$(window).height()-30){ 
       $(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percentage, 
        thickness: 14, 
        fill: { color: '#1B58B8' } 
       }).on('circle-animation-progress', function(event,progress,stepValue) { 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
       }).stop(); 
      } 
     }); 
    } 

    // Show animated elements 
    animateElements(); 
    $(window).scroll(animateElements); 
});

任何建議S' 非常感謝。

來源

2014-09-10 Carlos Charles

這是的jsfiddle：http://jsfiddle.net/edward_lee/1f58u1o5/2/

添加數據屬性上<div class="progressbar">檢查播放動畫或沒有。其初始值爲false，因爲動畫尚未播放。

<div class="progressbar" data-animate="false">

添加屬性是if語句if(elementPos<topOfWindow+$(window).height()-30 && !animate)假條件。

一旦播放動畫，請將屬性設置爲true。

$('.progressbar').each(function(){ 
    var elementPos = $(this).offset().top; 
    var topOfWindow = $(window).scrollTop(); 
    var percent  = $(this).find('.circle').attr('data-percent'); 
    var percentage = parseInt(percent, 10)/parseInt(100, 10); 
    var animate = $(this).data('animate'); 
    if(elementPos<topOfWindow+$(window).height()-30 && !animate){ 
     $(this).data('animate', true); 
     $(this).find('.circle').circleProgress({ 
      startAngle: -Math.PI/2, 
      value: percentage, 
      thickness: 14, 
      fill: { color: '#1B58B8' } 
     }).on('circle-animation-progress', function(event,progress,stepValue) { 
      $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
     }).stop(); 
    } 
});

來源

2014-09-10 21:01:59

圈進度條不斷循環

回答

相關問題