jQuery动画圆形进度条

我正在使用动画圆形进度条的jQuery脚本。现在，当点击开始按钮时，进度条就起作用。当用户自动滚动到div ID“stats”时，我想要启动此进度条。如何才能做到这一点？jQuery动画圆形进度条

我已经做了小提琴展示我到目前为止有：
https://jsfiddle.net/rpkcw236/9/

jQuery(document).ready(function($){ 
$('.pie_progress').asPieProgress({ 
    namespace: 'pie_progress', 
    barsize: '2', 
    trackcolor: '#ececea', 
    barcolor: '#e6675f' 
}); 
$('#button_start').on('click', function(){ 
    $('.pie_progress').asPieProgress('start'); 
}); 
$('#button_finish').on('click', function(){ 
    $('.pie_progress').asPieProgress('finish'); 
}); 
$('#button_go').on('click', function(){ 
    $('.pie_progress').asPieProgress('go',50); 
}); 
$('#button_go_percentage').on('click', function(){ 
    $('.pie_progress').asPieProgress('go','50%'); 
}); 
$('#button_stop').on('click', function(){ 
    $('.pie_progress').asPieProgress('stop'); 
}); 
$('#button_reset').on('click', function(){ 
    $('.pie_progress').asPieProgress('reset'); 
}); 
});

这里是链接到脚本我使用：
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html

来源

2016-03-20 Alex Zahir

_“我希望这个进度条在用户滚动到div ID”stats“时自动启动”_没有可滚动内容出现在https://jsfiddle.net/rpkcw236/7/？ – guest271314

添加了占位符内容，以便现在可以滚动页面。 https://jsfiddle.net/rpkcw236/8/ –

'.asPieProgress'未定义在https://jsfiddle.net/rpkcw236/8/ – guest271314

你需要它分解成两个步骤： 1）获取从顶部动态div的距离。 2）一旦你获得最高价值将这个最高价值传递给第2步中的代码。

第一步：获取从顶部动态格位置（例如＃我的动态-DIV）

var $output = $('#output'); 
    $(window).on('scroll', function() { 
    var scrollTop  = $(window).scrollTop(), 
    elementOffset = $('#my-dynamic-div').offset().top, 
    distance  = (elementOffset - scrollTop); 
    $output.prepend('<p>' + distance + '</p>'); 
    }); 

    OR 

    E.G: var distance = $("#MyDiv").offset().top

裁判：http://jsfiddle.net/Rxs2m/

第二步：路过这里距离值，而不是硬编码值350.

flag=true; 

$(window).scroll(function() { 
st=$(window).scrollTop(); 
$('#topscroll').html(st) 


if(st>350){ 
    if(flag) 
    $('.pie_progress').asPieProgress('start'); 
    flag=false; 
} 
});

祝你好运&希望这有助于。

来源

2016-03-20 07:12:00 Dev

这个作品，非常感谢 –

“if（st> 350）”。内容将是动态的，因此我们不能设置固定的高度。这需要为动态内容自动计算。 –

你需要把它分成2个步骤，1）从顶部获得动态div的距离。 2）一旦你得到最高价值将这个最高价值传递给上面的代码。就这样。 – Dev

尝试使用 ~~.scrollTop()， .offset().top~~ Element.getBoundingClientRect() of #progress element，.off()

$(window).on("scroll", function() { 
    if ($("#progress")[0].getBoundingClientRect().top < 150) { 
     $('.pie_progress').asPieProgress('start') 
     $(this).off("scroll") 
    } 
    })

的jsfiddle https://jsfiddle.net/rpkcw236/29/

来源

2016-03-20 06:44:26 guest271314

我想省略点击#button_start。当窗口滚动到#progress时，我希望它自动启动。 –

_“我想省略点击#button_start，我希望它在窗口滚动到#progress时自动启动。”_？你有没有试过jsfiddle https://jsfiddle.net/rpkcw236/10/？当使用现有的“click”处理程序滚动到“＃progress”时，动画就开始了。您可以使用'if（$（this）.scrollTop（）+ 20> = $（“＃progress”）。offset（）。top）{$（'。pie_progress'）。asPieProgress（'start'）;} ' – guest271314

我的要求是，不应该需要点击处理程序来启动动画，并且它应该在窗口滚动到进度时开始。你可以把你的新代码更新到JSFIDDLE _“if（$（this）.scrollTop（）+ 20> = $（”＃progress“）。offset（）。top）{$（'。pie_progress'）。asPieProgress （'start'）;}“_ –

jQuery动画圆形进度条

回答

相关问题