黑马程序员技术交流社区

标题: javascript在线提问:运行不能显示,value表示要显示的div高度 [打印本页]

作者: 山治0712    时间: 2014-2-25 22:02
标题: javascript在线提问:运行不能显示,value表示要显示的div高度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
<style type="text/css">
table a:link,table a:visited{
        color:#000000;
        text-decoration:none;
}
#table1{
        background-color:#3c9dff;
}
div{
        width : 300px;
        height : 1px;
        background-color : #ff9933;
        display : none;
        overflow : hidden;
}
.over{
        background-color : #ff9933;
}

</style>

<script type="text/javascript">
var oThNodes = document.getElementsByTagName("th");
var divNodes = document.getElementsByTagName("div");
/*鼠标滑进*/
function changeOver(num){
        this.num=num;
        var oThNode = oThNodes[num];
        var divNode = divNodes[num];

        name = oThNode.className;//换标题颜色
        oThNode.className="over";
       
        divNode.style.display = "block";//打开当前的DIV显示区域条件
       
        for(var x=0;x<3;x++){//关闭其他DIV显示的条件
                if(x != num)
                        divNodes[x].style.display = "none";
        }
        timerID1 = window.setInterval("addFontHeight(num)",1);//循环增加显示的高度,产生动态效果
}
//展开动态效果
function addFontHeight(num){
        var value = 1;
        var divNode = divNodes[num];

        ++value;

        if(value>68){
                clearInterval(timerID1);
                value=1;
                divNode.style.height = "70px";
                return;
        }
        divNode.style.height = value+"px";
}
/*鼠标滑出*/
function changeOut(num){
        this.num=num;
        var oThNode = oThNodes[num];
        var divNode = divNodes[num];

        oThNode.className = name;//恢复标题原来的颜色

        timerID2 = window.setInterval("decFontHeight(num)",1);//循环增加显示的高度,产生动态效果
}
//关闭动态效果
function decFontHeight(num){
        var value = 70;
        var divNode = divNodes[num];

        --value;

        if(value<2){
                clearInterval(timerID2);
                value=70;
                divNode.style.display = "none";
                return;
        }
        divNode.style.height = value+"px";
}
</script>
</head>

<body>
  <table width=300 cellspacing=0; id="table1">
        <tr>
                <th><a >新浪</a></th>
                <th><a >百度</a></th>
                <th><a >搜狐</a></th>
        </tr>
  </table>

<div width=300>
  <table width=300>
        <tr>
                <th>新浪新闻1</th>
                <th>新浪新闻1</th>
                <th>新浪新闻1</th>
        </tr>
        <tr>
                <th>新浪新闻2</th>
                <th>新浪新闻2</th>
                <th>新浪新闻2</th>
        </tr>
        <tr>
                <th>新浪新闻3</th>
                <th>新浪新闻3</th>
                <th>新浪新闻3</th>
        </tr>
  </table>
</div>

<div width=300>
  <table width=300>
        <tr>
                <th>百度新闻1</th>
                <th>百度新闻1</th>
                <th>百度新闻1</th>
        </tr>
        <tr>
                <th>百度新闻2</th>
                <th>百度新闻2</th>
                <th>百度新闻2</th>
        </tr>
        <tr>
                <th>百度新闻3</th>
                <th>百度新闻3</th>
                <th>百度新闻3</th>
        </tr>
</table>
</div>

<div width=300>
  <table width=300>
        <tr>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
        </tr>
        <tr>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
        </tr>
        <tr>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
                <th>搜狐新闻1</th>
        </tr>
  </table>
</div>
</body>
</html>







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2