主页 / 网络编程 /

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

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考，具体如下

<html xmlns="http://.w3./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  = document.documentElement.scrollTop + document.body.scrollTop; 
//网页的高度 
var textheight = $(document).height(); 
// 网页高度--当前窗口高度  
if (textheight -  - $(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:#c;margin-: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程序设计有所帮助。

上一篇：原生js和jQuery实现淡入淡出轮播效果 下一篇：尝试动手制作javascript放大镜效果

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by