鼠标事件改变表格高度加上平滑过渡效果
下面的代码是一个表格平滑展开,问能否实现 两个(或多个)表格切换呢?
------------------------------- ----------------------------------
点表一 表一
------------------------------ 点表一后 变成
表二
---------------------------------------
表二
------------------------------- ----------------------------------------
图1 图2
即 点表一后 平滑切换 成 图2, 点表二后 平滑切换 成 图1 .
就是类似于折叠菜单的效果.
代码:
<script language="JavaScript">
var act;
function over(){
var h = parseInt(mytd.height);
if (h < 164){
mytd.height = h + 2;
clearTimeout(act);
act = setTimeout('over()', 10);
}
}
function out(){
var h = parseInt(mytd.height);
if (h > 30){
mytd.height = h - 2;
clearTimeout(act);
act = setTimeout('out()', 10);
}
}
</script>
<table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd" onMouseOver="over()" onMouseOut="out()">
<tr>
<td>无忧脚本 - 风云突变</td>
</tr>
</table>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="JavaScript">
var act,act1;
function over(id){
var h = parseInt(id.height);
if (h < 164){
id.height = h + 2;
if(id==mytd){
clearTimeout(act);
act = setTimeout(function(){over(id);},10);
}
else{
clearTimeout(act1);
act1 = setTimeout(function(){over(id);},10);
}
}
}
function out(id){
var h = parseInt(id.height);
if (h > 30){
id.height = h - 2;
if(id==mytd){
clearTimeout(act);
act = setTimeout(function(){out(id);},10);
}
else{
clearTimeout(act1);
act1 = setTimeout(function(){out(id);},10);
}
}
}
</script>
<table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd" onMouseOver="over(mytd)" onMouseOut="out(mytd)">
<tr>
<td>无忧脚本 - 风云突变</td>
</tr>
</table>
<table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd1" onMouseOver="over(mytd1)" onMouseOut="out(mytd1)">
<tr>
<td>无忧脚本 - 风云突变</td>
</tr>
</table>
</BODY>
</HTML>
[/code]
页:
[1]