页面滚动动态加载数据,页面下拉自动加载内容
2016-05-24 13:59
459 查看
<</span>script src="js/jquery.js" type="text/javascript"></</span>script>
<</span>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) <</span>= totalheight && num != maxnum) {
main.append("<</span>div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num
)+(num )+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</</span>div>");
num++;
}
});
});
</</span>script>
</</span>head>
<</span>body>
<</span>div id="content" style="height:960px">
<</span>div id="follow">this is a scroll test;<</span>br/> 页面下拉自动加载内容</</span>div>
<</span>div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</</span>div>
</</span>div>
<</span>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) <</span>= totalheight && num != maxnum) {
main.append("<</span>div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num
)+(num )+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</</span>div>");
num++;
}
});
});
</</span>script>
</</span>head>
<</span>body>
<</span>div id="content" style="height:960px">
<</span>div id="follow">this is a scroll test;<</span>br/> 页面下拉自动加载内容</</span>div>
<</span>div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</</span>div>
</</span>div>
相关文章推荐
- 【转】win7 旗舰版激活密钥
- linux命令之seq
- 用Python写一个无界面的2048小游戏
- 第十三周-阅读程序
- 第十三周项目—阅读程序,并运行结果(纯虚函数)
- android用socket向服务器发送和接收消息 【转自网易闯京城的博客】
- 百度竞价悄然改版
- NYOJ-24-素数距离问题
- VC6已停止工作_亲身试验OK
- Android对图片进行压缩
- Python class method
- IOS自动布局之Autoresizing
- 为什么给行内块级元素inline-block添加margin-top为负值的时候不起作用?
- apache kafka技术分享系列(目录索引)
- Get Up to 20% off lucky code for 07 rs gold buying from Rsorder facebook 5.20-5.30
- 穿越雷区第六届蓝桥杯大赛个人赛决赛(C语言A组)第四题
- centos7.1安装部署Hadoop
- iOS添加framework, 报错“dyld: Library not loaded”
- 第11周项目4—教师兼干部类
- 免费ARP简单介绍和程序编写