有几个 jQuery 插件可以检查元素是否滚动到视图中,例如
jquery.inview。
示例设置:
<input type='text' class='dial' value='0' data-number='100' />
<div style="height: 300px">scroll down</div>
<div class="startKnob">start</div>
初始化旋钮并为动画编写一个函数。只需绑定inview
到视口之外的元素,并且应该在它出现时立即启动动画。
$(function () {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true
});
});
startKnob = function() {
$('.dial').animate({
value: $('.dial').data('number')
},{
duration: 950,
easing: 'swing',
progress: function () {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
}
$('.startKnob').bind('inview', startKnob);
此处的工作示例:在查看特定元素时启动旋钮动画