拉动滚动条加载数据的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的动态删除Table表格的行和列的代码以前脚本之家也发布过相关的代码，大家可以参考下。2011-05-05
这篇文章主要介绍了jQuery制作的超酷平面式时钟效果，把日期和时间通过横向刻度条展现，推荐给大家，有需要的小伙伴可以参考下2015-08-08
解析页面加载与js函数的执行 onload or ready
这篇文章主要介绍了页面加载与js函数的执行 onload or ready 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了jQuery+PHP+Mysql实现抽奖程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
jQuery使用after()方法在元素后面添加多项内容的方法
这篇文章主要介绍了jQuery使用after()方法在元素后面添加多项内容的方法,实例分析了jQuery中after方法的功能及在元素后面添加内容的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery实现浮动层随浏览器滚动条滚动的方法,涉及jQuery操作页面元素滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。下面通过本文给大家分享jQuery中关于Ajax的几个常用的函数，需要的的朋友参考下2017-07-07
这篇文章主要介绍了用jQuery的AJax实现异步访问、异步加载，jQuery的ajax异步实现数据交互的相关技巧,并提供了完整示例demo供读者参考,需要的朋友可以参考下2016-11-11
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。2014-12-12
这篇文章主要介绍了jQuery Ajax 加载数据时异步显示加载动画的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论