jquery 滚动加载
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>拉动滚动条加载数据</title>
<script src="jquery-1.7.1.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() <= 40) {
if (i >= 100) {
return;
//控制最大只能加载到100
}
i++;
//可以根据实际情况，获取动态数据加载 到 div1中
$('<div>' + i + '</div>').appendTo($('#div1'));
}
});
})
</script>
<style>
#div1 div {
font-size: 100px;
background: #ccc;
margin-top: 5px;
}
#div2 {
width: 200px;
height: 40px;
line-height: 40px;
background: #999;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
7
</div>
<div>
8
</div>
<div>
9
</div>
<div>
10
</div>
</div>
<div id="div2">数据加载中...</div>
</body>
</html>
jquery 滚动加载的更多相关文章
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
- JQUERY滚动加载
$(document).height():整个网页的高度$(window).height():浏览器可视窗口的高度$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直 ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
随机推荐
- C# Trim方法去除字符串两端的指定字符
var str= ",2,3,4,6,7,"; var str2 = str.Trim(new char[] { ',' }); //去除字符串str两端的','字符. //则st ...
- 46 Permutations(全排列Medium)
题目意思:全排列 思路:其实看这题目意思,是不太希望用递归的,不过还是用了递归,非递归的以后再搞吧 ps:vector这玩意不能随便返回,开始递归方法用vector,直接到500ms,换成void,到 ...
- canvas新属性
lineCap默认值是butt,还有aquare,round 使用:context.lineCap="butt" lineJoin miter是默认 还可以是round,bevel ...
- phpstorm 配置
JetBrains PhpStorm 8注册码一枚 username :cf96PiPYt271u1TC License Key : 97807-12042010 00001GctOKh8f206hl ...
- jQuery判断浏览器
在jQuery1.9版本之前,jQuery 提供了 browser 标记 <script type="text/javascript" src="http://aj ...
- js 获取鼠标位置坐标
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- ASP.NET中Request.ApplicationPath、Request.FilePath、Request.Path、.Request.MapPath
1.Request.ApplicationPath->当前应用的目录 2.Request.FilePath->对应于iis的虚拟目录 如 URL http://mockte.com/1 ...
- Tag标签系统设计
转一篇关于tag的文章: <Tagging: People-powered Metadata for the Social Web>出版于2008年,中文版译为<标签:标记系统设计 ...
- HBase Java API入门
概括 1. 创建.删除及启用禁用表.添加列等都需用到HBaseAdmin,另外需要注意删除,添加列等操作都需要禁用表 2. 表中添加数据,查询等都是和HTable相关,如果是多线程的情况下注意用HTa ...
- sqlserver如何启动数据库邮件
可以在 msdb 数据库中停止数据库邮件.若要检查数据库邮件的状态,请执行下面的语句: 复制 EXECUTE dbo.sysmail_help_status_sp; 若要在邮件主机数据库中启动数据库邮 ...