jQuery实现模仿微博下拉滚动条加载数据效果

前端技术 2023/09/05 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12797

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案