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


Posted in Javascript onDecember 25, 2015

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

Javascript 相关文章推荐
用jquery.sortElements实现table排序
May 04 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue路由跳转传参数的方法
May 06 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
Javascript如何实现双指控制图片功能
Feb 25 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python显示进度条的方法
2014/09/20 Python
python检测是文件还是目录的方法
2015/07/03 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python实现梯度下降法
2020/03/24 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
灵泰克Java笔试题
2016/01/09 面试题
2014年租房协议书范本
2014/10/30 职场文书
导游词400字
2015/02/13 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
重阳节活动主持词
2015/07/04 职场文书
vue前端工程的搭建
2021/03/31 Vue.js