手机滚屏页面下拉自动加载内容
2016-05-25 17:38
344 查看
DOCTYPE=html>
<</span>html>
<</span>head>
<</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>body>
</</span>html>
<</span>html>
<</span>head>
<</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>body>
</</span>html>
相关文章推荐
- [置顶] Android自定义ViewGroup(四、打造自己的布局容器)
- 删除主页卫士流氓软件
- Android控件系列之RadioButton&RadioGroup
- Android自定义ViewGroup(四、打造自己的布局容器)
- ROC曲线判别线性回归,java实现。
- Web服务器Nginx多方位优化策略
- MT4中Dll调用详解
- 使用golang抓取京东商品数据
- PhalGo-介绍 PhalGo-介绍
- iOS开发网络篇—数据缓存
- 抽象类的基本概念
- 最全整理浏览器兼容性问题与解决方案
- android蓝牙开发---与蓝牙模块进行通信
- C#中重新定义Console实现自动保存输出到文件
- XHTML标签的嵌套规则分析
- angularjs优化方略
- Android技巧之封装Log工具类
- 网站锚点执行平滑滚动
- ArcBall坐标旋转三维物体原理
- HDU 1075.What Are You Talking About【Map水题(字典树)】【5月25】