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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
package.json各个属性说明详解
Mar 11 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中如何直接执行SHELL
2013/06/28 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
js事件委托和事件代理案例分享
2017/07/25 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
培训演讲稿范文
2014/01/12 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
学生保证书
2015/01/16 职场文书
担保书范文
2015/01/20 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python