拉动滚动条加载数据的jquery代码
更新时间:2012年05月03日 20:10:42 作者:
拉动滚动条加载数据的jquery代码,需要的朋友可以参考下
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>拉动滚动条加载数据</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var i = 4;$(window).bind("scroll", function (event)
{
//滚动条到网页头部的 高度,兼容ie,ff,chrome
var top = document.documentElement.scrollTop + document.body.scrollTop;
//网页的高度
var textheight = $(document).height();
// 网页高度-top-当前窗口高度
if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return;
//控制最大只能加载到100
}
$('#div1').css("height", $(document).height() + 100);i++;
//可以根据实际情况,获取动态数据加载 到 div1中
$('<div>' + i + '</div>').appendTo($('#div1'));
}
});
})
</script>
<style>
#div1 div
{
font-size: 100px;
background: #ccc;
margin-top: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 1000px;" id="div1">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</form>
</body>
</html>
相关文章
JQuery扩展插件Validate 3通过参数设置错误信息
最终显示在页面上的错误分为两种:第一种是默认错误信息,该信息已经被定义在插件中了,可以手动修改。2011-09-09基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
本篇文章基于jquery让数字时钟真正的跑起来,实现一个带有日期和星期的网页版数字时钟,效果非常逼真,感兴趣的朋友一起看看吧2015-11-11jQuery ajax全局函数处理session过期后的ajax跳转问题
这篇文章主要介绍了基于jQuery的全局ajax函数处理session过期后的ajax操作的相关资料,需要的朋友可以参考下2016-06-06
最新评论