jQuery实现模仿微博下拉滚动条加载数据效果
更新时间：2015年12月25日 09:56:08 作者：cui_angel
这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考，具体如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>滚动条距离底部</title>
<script src="jquery-1.6.2.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>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
</div>
</form>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery animate 动画效果使用说明，需要的朋友可以参考下。2009-11-11
Jquery操作radio,checkbox,select表单操作实现代码
Jquery操作radio,checkbox,select表单操作实现代码，需要用jquery操作表单的朋友可以参考下。2010-04-04
jquery focus(fn),blur(fn)方法实例代码
jquery focus(fn),blur(fn)方法实例代码，需要的朋友可以参考下。2011-12-12
在使用$(#id).attr(color) 获取颜色的时候，ie和ff是不同的，下面有个示例，大家可以参考下2014-03-03
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
这篇文章主要介绍了jQuery获取访问者IP地址的方法,实例分析了jQuery基于新浪API与QQ查询接口获取来访者IP的相关参数传递与数据处理技巧,需要的朋友可以参考下2016-05-05
基于jQuery的网页右下角弹出广告(IE7,firefox)
以前曾写过一个,不过太麻烦了,呵呵```现在改进了一下,其实很简单:css定位层一直在右下角,用js控制层的高度增减。2010-08-08
这篇文章主要介绍了jquery对象和DOM对象的任意相互转换的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了jQuery下拉友情链接美化效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了利用jQuery设计一个简单的web音乐播放器的实例分享,包括PHP后台和从MySQL中读取曲目等基本功能的实现,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery包裹节点用法,结合完整实例形式分析了jQuery中wrap方法包裹节点的使用技巧,注释中还包含了wrapAll与wrapInner方法的使用,需要的朋友可以参考下2016-09-09
最新评论