模仿QQ校友滚动自动加载效果

最新推荐文章于 2024-09-23 14:24:34 发布

weixin_34185512

最新推荐文章于 2024-09-23 14:24:34 发布

阅读量47

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/kisscucci/blog/14575

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"/></script>
<script>
var index,step=5;//每次获得信息数
$(function() {
    $.ajax({
        type: "get",
        url: "http://www.cnblogs.com/rss",
		success: function(data) {
            $("item", data).each(function(i, domEle) {
                if (i < 5) {//第一次读取5条
					$("#news").prepend("<li>" + $(domEle).children("title").text() + "</li>");
				}
            });
            index = 5;
        },
        complete: function(XMLHttpRequest, textStatus) {
            $("p").remove();
        }
    });
})
var bonscroll=true
window.onscroll = function(){
	if(!bonscroll){
		bonscroll=true
		return;
	}
	var scrollHeight=document.documentElement.scrollHeight;//网页页面高度
    var clientHeight=document.documentElement.clientHeight;//可见高度
    var scrollTop=document.documentElement.scrollTop+document.body.scrollTop;// 滚动条位置
	if(parseInt(parseInt(scrollTop+clientHeight)/scrollHeight)>0.8){
		$.ajax({
            type: "get",
            url: "http://www.cnblogs.com/rss",
            success: function(data) {
                $("item", data).each(function(i, domEle) {
                    if (i >= index && i < index + step) {
						$("#news").append("<li>" + $(domEle).children("title").text() + "</li>");
					}
                });
                index += step;
            }
        });
		bonscroll=false
	}
}
</script>
</head>
<body>
<h4>新闻信息</h4>
<div id="news"><p>请稍候...</p></div>
</body>
</html>

把上面的代码保存到本地为html文档，然后用游览器打开，调整游览大小，使其出现上下滚动条！然后效果会出现滴！嘿嘿

不知道这样的方法效率方面怎么样！！！

如果你有什么高见，可以在下面发表自己的看法！！！嘻嘻

效果预览：