信鸽网

javascript 翻页测试页(动态创建标签并自动翻页)

  作者：bea

<!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


<!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=gb2312" />
<title>翻页测试页</title>
</head>

<body>
</body>
</html>
<script language="javascript">
<!--
var div = document.createElement("div");

for(var i = 1; i <= 100; i ++) {
var l = document.createElement("div");
l.style.margin = "0px";
l.style.padding = "0px 6px";
l.style.fontSize = "14px";
l.style.color = "#ffffff";
l.style.backgroundColor = "#316AC5";
l.style.width = "24px";
l.style.height = "20px";
l.style.styleFloat = "left";
l.innerHTML = i;
div.appendChild(l);

var c = document.createElement("p");
c.style.margin = "0px";
c.style.fontSize = "14px";
c.innerHTML = "this is line " + i + ".";
c.style.lineHeight = "20px";
div.appendChild(c);
}
div.id = "div";
div.style.border = "#ECE9D8 1px solid";
div.style.width = "600px";
div.style.height = "480px";
div.style.overflow = "auto";
document.body.appendChild(div);

div = document.createElement("div");
div.id = "info";
div.style.fontSize = "14px";
document.body.appendChild(div);

var $ = function(id) {
return typeof(id) == "object" ? id : document.getElementById(id);
}

function scrollTo(id,moveto) {
var isMove = 1;
if(moveto > $(id).scrollHeight - $(id).offsetHeight) {
moveto = $(id).scrollHeight - $(id).offsetHeight;
}
if(Math.abs($(id).scrollTop - moveto) <= 5) {
$(id).scrollTop = moveto;
isMove = 0;
} else {
isMove = 1;
$(id).scrollTop += Math.round((moveto - $(id).scrollTop) / 2);
setTimeout("scrollTo('" + id + "'," + moveto + ");",100);
}
updateInfo(moveto,isMove);
}

function scroll(id) {
var moveto = $(id).scrollTop + $(id).offsetHeight;
if($(id).scrollTop == $(id).scrollHeight - $(id).offsetHeight) {
moveto = 0;
} else if(moveto > $(id).scrollHeight - $(id).offsetHeight) {
moveto = $(id).scrollHeight - $(id).offsetHeight;
}
scrollTo(id,moveto);
}

var updateInfo = function(moveto,isMove) {
$("info").innerHTML = "当前位置 : " + $("div").scrollTop;
$("info").innerHTML += "    此次翻页到达位置 : " + moveto + "    翻页状态 : " + (isMove ? "<font style='color:#ee0000;'>翻页中...</font>" : "<font style='color:#00cc66;'>已完成</font>");
$("info").innerHTML += "<br>翻页层的相关属性 : scrollHeight(总高度):" + $("div").scrollHeight + "    offsetHeight(可见域高度):" + $("div").offsetHeight + "    scrollTop(当前翻页高度):" + $("div").scrollTop;
}
setInterval("scroll('div')",5000)
//-->
</script>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: