仿qq空间好友动态刷新
在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 删除
评论
登录后参与评论
推荐阅读