如何仅在视口中显示数据
How to show data only when in viewport
我打算使用一个名为charts的jQuery插件.js用于图形和图表。但是,在较大的页面上,这些图形的动画甚至在用户看到它们之前就已经完成。
我的问题是,只有当特定div/部分的内容在视口内可见时,我们如何淡入特定div/部分的内容,如图表.js网站上所描绘的那样。当我们向下滚动时,内容会按顺序淡入,因此甚至不会错过图表的动画。如何在jQuery的帮助下实现这一点?
看看这个jsFiddle。当盒子变得可见时,作者会淡入盒子。您可能需要调用 chart.js 来创建可见的图形,而不仅仅是淡入(也就是说,如果您想要花哨的图形动画,而不仅仅是淡入 :-)) 我已经调整了小提琴并将其包含在下面:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});
Mika 的视口选择器插件适用于浏览器窗口视口,而不是 html 元素。换句话说,如果你有一些像 #container{width:350px;height:150px;overflow:auto;}这样的css,它在滚动时将不起作用。
我建议尝试他的另一个插件,延迟加载
下面是一个示例:http://jsbin.com/efazos/1/edit
下面的代码将使您能够确定元素是否在文档滚动的窗口中。从那里您可以启用图表并执行您喜欢的任何动画:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('scroll', function() {
//Get Div 1's Top and Left offsets from the Document.
var divTop = $('#div1').offset().top;
var divLeft = $('#div1').offset().left;
//Get the current window height and width.
var winHeight = $(window).height();
var winWidth = $(window).width();
if (divPos <= winHeight && divLeft <= winWidth) {
//Div is visible in window
//Fade in Chart
}
});
});
</script>
相关文章:
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- Angular渲染元素,但不渲染;t显示数据
- 如何在分页事件中突出显示数据表中的单词
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- MVC中关于表的自定义工具提示-每行显示数据
- Highcharts:根据表单输入动态显示数据
- 重置transform:rotate(),方法是移除并追加在追加和重绘图表后未显示数据的画布
- jqGrid无法显示数据
- 显示数据的最快方式
- 如何从jquery日期和时间选择器中选择和显示数据
- 我的复选框没有't使用的循环来显示数据
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 车把模板不显示数据
- 如何完成表单后使用 AJAX 重定向并在其他页面上显示数据
- Html5 Web 存储未在第二页中显示数据
- ASP.Net VB - 显示数据折叠样式
- 正确禁止显示数据表中的警告
- 在使用 JS 进行选择时在文本框中显示数据
- 如何使用 C# 和 Angular js 在视图上显示数据
- 在轨道上的 Ruby 文本字段中动态显示数据