网站主页   操作系统    网络工程    服务器    网页制作    数据库    程序开发    网络安全    办公软件   
讲座日期: 本周六下午1点30分 抢座
讲座地点: 北大青鸟马甸校区
主讲老师: 王老师 金牌讲师
讲座主题: 网络安全
讲座内容: 检测、防御、黑客信息,如何过滤不安全的网站,如何防御黑客的进攻。
订座电话: 010-82011432/33
  您当前位置:主页 > 网络学院 > 网页制作 > Javascript >

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




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

 


上一篇:js控制div及网页相关属性的代码  
下一篇:Js获取table当前tr行的值的代码
相关信息:

·Javascript 定时器调用传递参数的方法 ·JS解析XML的实现代码
·javascript 日期常用的方法 ·Javascript 解疑
·JavaScript中出现乱码的处理心得 ·JavaScript 图片预览效果 推荐
·javascript 年月日联动实现核心代码 ·Javascript和Ajax中文乱码吐血版解决方案
·JS 在数组插入字符的实现代码(可参考JavaScript splic ·javascript demo 基本技巧

Copyright © 2002-2015 版权所有
学校地址:北京市海淀区西三旗建材城中路29号北大青鸟
招生热线:010-82011433/32 京公网安备110102004704  京ICP备05043413号 京公网安备110102004704