Question

heyy我遇到了这个问题...我想在视口开始进度栏进度....用百分比文本和条形码....演示在这里

$('.bar-percentage[data-percentage]').each(function () {
 var progress = $(this);
 var percentage = Math.ceil($(this).attr('data-percentage'));



$({countNum: 0}).animate({countNum: percentage}, {
duration: 3000,
easing:'swing',


step: function() {
  // What todo on every count
var pct = '';
if(percentage == 0){
  pct = Math.floor(this.countNum) + '%';
}else{
  pct = Math.floor(this.countNum) + "%";
}

progress.text(pct) && progress.siblings().children().css('width', pct);
    }
   });
 });

http://cssdeck.com/labs/percentage-bar

Answer 1

这对您来说是完全正常运行的，使用此代码，您的进度条会在查看第一个进度条时开始设置动画，然后再不进行动画处理

    function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var IsViewed = false;

$(document).scroll(function () {

  if(isScrolledIntoView('#bar-1') && !IsViewed){
$('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 2000,
    easing:'linear',
    step: function() {
      // What todo on every count
    var pct = '';
    if(percentage == 0){
      pct = Math.floor(this.countNum) + '%';
    }else{
      pct = Math.floor(this.countNum+1) + '%';
    }
    progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});
    IsViewed = true;
  }
});

我希望进度条在查看时开始动画

1 个答案: