黑马程序员技术交流社区

标题: 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