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程序设计有所帮助。