<!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>
|
收藏
淘帖
踩
