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 基础学习笔记
May 29 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Javascript之String对象详解
Jun 08 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
keras中的backend.clip用法
2020/05/22 Python
pip install命令安装扩展库整理
2021/03/02 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
身边的榜样活动方案
2014/08/20 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS