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

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2016-01-09
这篇文章主要介绍了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  runat="server"> 
<div style="height: 1000px;" > 
<div> 
1</div> 
<div> 
2</div> 
<div> 
3</div> 
<div> 
4</div> 
</div> 
</form> 
</body> 
</html> 

希望本文所述对大家jQuery程序设计有所帮助。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • Python中在脚本中引用其他文件函数的实现方法
    下面小编就为大家带来一篇Python中在脚本中引用其他文件函数的实现方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧在导入文件的时候,Python只搜索当前脚本所在的目录,加载(entry-point)入口脚本运行目录和sys.path中包含的路径例如包的安装地址.所以如果要在当前脚本引用其他文件,除了将文件放在和脚本同一目 ...
  • 关于IE11修改User-agent不再支持document.all等
    这篇文章主要介绍了关于IE11修改User-agent不再支持document.all等,需要的朋友可以参考下一个新的身份标识关于IE11的第一个新闻就是它有了一个新的用户代理(UA)字符串: Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) lik ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
猜你喜欢