[英]jQuery animated circular progress bar
I am using a jQuery script for an animated circular progress bar. 我正在使用jQuery脚本进行动画循环进度条。 Right now the progress bar works when the start button is clicked.
现在,当单击开始按钮时,进度条会起作用。 I want this progress bar to start when the user scrolls to the div id "stats" automatically.
当用户自动滚动到div id“stats”时,我希望此进度条开始。 How can this be done?
如何才能做到这一点?
I have made a fiddle to show what I have so far: 我已经做了一个小提示来展示我到目前为止所拥有的东西:
https://jsfiddle.net/rpkcw236/9/ 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');
});
});
Here is the link to the script I am using: 这是我正在使用的脚本的链接:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html
You need to break it up into 2 steps: 1) get the distance of the dynamic div from the top. 您需要将其分解为两个步骤:1)从顶部获取动态div的距离。 2) Once you get the top value pass this top value to the code in step2.
2)获得最高值后,将此顶部值传递给step2中的代码。
Step1: Get the dynamic div position from the top (eg #my-dynamic-div) Step1:从顶部获取动态div位置(例如#my-dynamic-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
ref: http://jsfiddle.net/Rxs2m/ 参考: http : //jsfiddle.net/Rxs2m/
Step2: Pass the distance value here instead of the hard coded value 350. 步骤2:在此处传递距离值而不是硬编码值350。
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>350){
if(flag)
$('.pie_progress').asPieProgress('start');
flag=false;
}
});
Good luck & hope this helps. 祝你好运,希望这会有帮助。
Try using
.scrollTop()
,
.offset().top
Element.getBoundingClientRect()
of #progress
element, .off()
尝试使用
.scrollTop()
.offset().top
#progress
元素的Element.getBoundingClientRect()
#progress
.off()
$(window).on("scroll", function() {
if ($("#progress")[0].getBoundingClientRect().top < 150) {
$('.pie_progress').asPieProgress('start')
$(this).off("scroll")
}
})
jsfiddle https://jsfiddle.net/rpkcw236/29/ jsfiddle https://jsfiddle.net/rpkcw236/29/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.