我使用一些jquery为条形图设置动画,但是在页面下方足够远,用户需要滚动才能看到它。
当用户滚动到其位置时,如何将其设置为动画。
arrayOfDataMulti = new Array(
[[936656,556247],'2005'],
[[913318,453238],'2006'],
[[921707,362327],'2007'],
[[894496,376587],'2008'],
[[738624,326656],'2009'],
[[759379,311336],'2010'],
[[746972,332962],'2011'],
[[666210,295708],'2012'],
[[568817,286204],'2013'],
[[548247,315037],'2014']
);
arrayOfDataMultiForSort = new Array(
[[936656,556247],'2005'],
[[913318,453238],'2006'],
[[921707,362327],'2007'],
[[894496,376587],'2008'],
[[738624,326656],'2009'],
[[759379,311336],'2010'],
[[746972,332962],'2011'],
[[666210,295708],'2012'],
[[568817,286204],'2013'],
[[548247,315037],'2014']
);
arrayOfColors = new Array('#006446','#6ebd44');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors,legends: ['Scope 1 / Direct','Scope 2 / Indirect'],
legend:true});
$('#multiMulti').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, type: 'multi' });
$('#multiDyn').html(",<br /> type: 'multi'");
});
$('#multiLegend').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, legend: true, legends: ['ads','leads','google ads'] });
$('#multiDyn').html(",<br /> legends: ['ads','leads','google ads'],<br /> legend: true");
});
$('#multiSortDesc').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMultiForSort, colors: arrayOfColors, sort: 'desc' });
$('#multiDyn').html(",<br /> sort: 'desc'");
});
$('#multiPrePost').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, prefix: '$', postfix: 'k' });
$('#multiDyn').html(",<br /> prefix: '$',<br /> postfix: 'k'");
});
$('#multiHideValues').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, showValues: false });
$('#multiDyn').html(",<br /> showValues: false");
});
$('#multiNoAnimate').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, animate: false });
$('#multiDyn').html(",<br /> animate: false");
});
$('#multiClear').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors });
$('#multiDyn').html("");
});
</script>
答案 0 :(得分:0)
this answer会满足您的目的吗?
function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
如果没有,该主题还有其他一些好的答案,包括jQuery的$().appear()
函数。