仿qq空间好友动态刷新

OECOM

发布于 2020-07-02 10:07:33

1.4K0

发布于 2020-07-02 10:07:33

文章被收录于专栏：OECOM

在qq空间里有好多网页特效值得初学html和js的去学习，今天我来介绍一种特效。我们在上qq空间是都会发现，当向下滚动鼠标，使滚动条到达最低端的时候，好友动态会自动增加。这种特效其实很简单，多余的不说了，直接上代码：

获取滚动条当前位置：

function getScrollTop() { 
	var scrollTop = 0; 
	if (document.documentElement && document.documentElement.scrollTop) { 
	scrollTop = document.documentElement.scrollTop; 
	} 
	else if (document.body) { 
	scrollTop = document.body.scrollTop; 
	} 
	return scrollTop; 
	}

获取当前可视范围的高度：

function getClientHeight() { 
	var clientHeight = 0; 
	if (document.body.clientHeight && document.documentElement.clientHeight) { 
	     clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	else { 
	clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	return clientHeight; 
	}

获取文档完整的高度：

function getScrollHeight() { 
	return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
	}

当到达底部是自动增加行：

window.onscroll = function () { 
		if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                var newnode = document.createElement("a"); 
		newnode.setAttribute("href", "#"); 
		newnode.innerHTML = "new item"; 
		document.body.appendChild(newnode); 
		var newline = document.createElement("br"); 
		document.body.appendChild(newline); 
}

这些都是js代码，可以提供一个小例子来演示一下：

<!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>无标题文档</title>
<script>
 	window.onscroll = function () { 
		if(getScrollTop() + getClientHeight() == getScrollHeight()) {
                var newnode = document.createElement("a"); 
		newnode.setAttribute("href", "#"); 
		newnode.innerHTML = "new item"; 
		document.body.appendChild(newnode); 
		var newline = document.createElement("br"); 
		document.body.appendChild(newline); 
			} 
		}
	//获取滚动条当前的位置
	function getScrollTop() { 
	var scrollTop = 0; 
	if (document.documentElement && document.documentElement.scrollTop) { 
	scrollTop = document.documentElement.scrollTop; 
	} 
	else if (document.body) { 
	scrollTop = document.body.scrollTop; 
	} 
	return scrollTop; 
	} 
	
	//获取当前可是范围的高度 
	function getClientHeight() { 
	var clientHeight = 0; 
	if (document.body.clientHeight && document.documentElement.clientHeight) { 
	clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	else { 
	clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
	} 
	return clientHeight; 
	} 
	
	//获取文档完整的高度 
	function getScrollHeight() { 
	return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
	} 

</script>
</head>

<body>
<ul>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
<li>啦啦啦啦啦啦啦啦啦</li>
</ul>

</div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-04-02，如有侵权请联系 cloudcommunity@tencent.com 删除

html