圈进度条不断循环

我有一个圆形的进步脚本在这里找到：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

圈进度条不断循环

回答

相关问题