我正在显示一个圆形进度栏,当动画绕圆形轴旋转时,从0-1000旋转时,如果我将功能设置为913,则它将其旋转至整个圆的91.3%。所有这些都很好,但是页面上的低调,所以我需要它在持有Div时开始。
我已经尝试过,这是我拥有的,但是目前该功能甚至无法运行。
$("body").scroll(function() {
var scrolledpx = parseInt($("body").scrollTop());
var p = $("#housePoints");
var offset = p.offset();
if(scrolledpx == offset.top )
{
// function for progress bar
var bar = new ProgressBar.Circle(oak, {
color: '#E44024',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#e3ebf7', width: 1 },
to: { color: '#E44024', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 1000);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.animate(0.913); // Number from 0.000 to 1.000
}
})
正如我所说,容器的ID是#housepoints,我希望该动画在视图时运行。也许甚至到达到Div的底部,它们在100px顶部和底部的DIV上有些填充,因此当仅到达顶部并且用户仍然错过时仍可能运行。
感谢您的任何帮助。GB
您可以尝试在.show(((示例。jQuery('#housePoints').show()
(方法中绑定您的进度圆圈,如答案中所述。
https://stackoverflow.com/a/12225238/2512022