jquery滚动加载数据
类别:Web前端 浏览量:1190
时间:2015-3-5 jquery滚动加载数据
jquery滚动加载数据我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。
jquery实现滚动加载数据的方式类似于
<!DOCTYPE=html>
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 20; //设置加载最多次数
var num = 1;
var totalheight = 0;
var main = $("#content"); //主体元素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
//console.log("页面的文档高度 :"+$(document).height());
//console.log('浏览器的高度:'+$(window).height());
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight && num != maxnum) {
main.append("<li style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</li>");
num++;
}
});
});
</script>
</head>
<body>
<li id="content" style="height:960px">
<li id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</li>
<li style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test li</li>
</li>
</body>
</html>
标签:jquery
您可能感兴趣
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- jQuery中height()、innerheight()、outerheight()的区别
- jQuery如何跳出each循环
- Uncaught TypeError: jQuery.handleError is not a function
- jquery.ajax error 如何调试错误
- Jquery实现table表格行的添加、删除
- jquery实现微信中长按识别二维码
- Jquery中的offset()和position()的区别
- jquery的each的用法
- jquery中wrap、wrapAll、wrapInner
- jquery中text(),val(),html()区别
- MVC中使用jQuery加载分部视图(PartialView)
- jquery无缝滚动代码(jQuery实现表格行数据滚动效果)
- jquery修改带有!important的样式
- jquery ajax的async使用
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
热门推荐
- dedecms命名规则(dedecms utf-8 出现乱码问题的解决方法之一)
- linux查python进程(linux查找当前python解释器的位置方法)
- SQL中case when的用法
- python去除字符串中间的空格(Python去除字符串前后空格的几种方法)
- 织梦dedecms开启付费授权(去掉织梦DedeCMS列表推荐时标题被加粗的方法)
- SQL Server中找出执行时间过长的作业
- php启用curl(php使用curl伪造浏览器访问操作示例)
- 笨办法学python3目录(如何愉快地迁移到 Python 3)
- phpmysql完全学习手册教程(Windows下搭建PHP开发环境Apache+PHP+MySQL)
- sql server中cxpacket等待