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程序设计有所帮助。
相关文章
JqueryUI作为一个优秀的前端库，在项目中经常会用到，下面小编抽点时间给大家介绍jQueryUI中的datepicker使用方法详解，一起看看吧2016-05-05
这里给大家分享的是一个网友咨询的关于jQuery获取name名的value值的问题，感觉很具有普遍性，所以记录下来，希望对大家能有所帮助。2015-02-02
下面是Jquery对checkbox的一些操作，全选，反选，取消全选等等.2011-05-05
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传。最近在使用jquery.form.js提交包含文件的表单时，当碰上网速较慢时，而我们又设置了timeout时我们的页面会死在这里，怎么回事呢，下面脚本之家小编给大家解答下2016-10-10
改写《锋利的jQuery》第三章章节总结的例子2010-03-03
jquery异常问题Uncaught TypeError: $(...).on is not a funct
这篇文章主要介绍了jquery异常问题Uncaught TypeError: $(...).on is not a function，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
jquery $.trim()去除字符串空格的实现方法【附图例】
下面小编就为大家带来一篇jquery $.trim()去除字符串空格的实现方法【附图例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
这篇文章主要介绍了jQuery超简单选项卡实现方法,以一个完整实例形式较为详细的分析了jQuery实现选项卡切换功能的相关技巧,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了JQuery如何按name属性选择元素问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
jQuery中;function($,undefined) 前面的分号的用处
这篇文章主要介绍了jQuery中;function($,undefined) 前面的分号的用处,需要的朋友可以参考下2014-12-12
最新评论