拉动滚动条加载数据的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点击事件回到页面顶部效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了基于jquery实现左右按钮点击的图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery实现返回顶部效果的方法,涉及jQuery页面样式、鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
导航菜单在网页中呈现的频率还是比较多的，因为效果相当不错,接下来为大家介绍下使用jquery实现经典二级导航菜单，各位童鞋们快来围观哦2013-03-03
jQuery zoom是一款能够查看相册大图的jQuery弹出层插件，点击相册的缩略图，就会弹出该相片对应的大图，并且带有个性的加载动画，还有上一张下一张按钮以及关闭按钮。使用方法非常简单。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。2015-04-04
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
这篇文章主要介绍了jQuery.extend()、jQuery.fn.extend()扩展方法的应用,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery在ul中显示某个li索引号的方法,涉及jQuery遍历元素的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
jquery ajax结合thinkphp的getjson实现跨域的方法
这篇文章主要介绍了jquery ajax结合thinkphp的getjson实现跨域的方法,结合实例形式对比分析了jQuery ajax实现跨域的具体操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
下面我介绍两种校验时间格式的正则表达式实例了，这个其实可以直接叫js了，因为正则功能jquery与js是一样的，下面看实例2013-09-09
jQuery中把ajax封装得非常好。但是日常开发中，我偶尔还是会遇到ajax报错。本文进行简单分析一下ajax报错。需要的朋友可以参考下2016-12-12
最新评论