您的位置：首页 > 编程语言

一个简单的滑动门效果-完整代码

2010-07-16 16:20 337 查看
说明：关于滑动门的相关代码很多，今天给大家推荐的是一个非常简单的实现方式，希望对大家的学习能有所帮助。

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

<style>

.li1 { display:block;border-bottom: #94D5F3 1px solid;border-right: #94D5F3 1px solid; background-color: #DBF2FD; text-decoration:none; }

.li2{ display:block; border-bottom:none; background-color: #ffffff; border-right: #94D5F3 1px solid;text-decoration:none; }

</style>

</head>

<body>

<table width="400" border="0" cellpadding="0" cellspacing="0" bordercolor="#003399">

<tr>

<td width="100" height="30"><div align="center" id="a1" class="li2"><a href="#" onmousemove="dj(1)">AAAA</a></div></td>

<td width="100"><div align="center" id="a2" class="li1"><a href="#" onmousemove="dj(2)">BBBB</a></div></td>

<td width="100"><div align="center" id="a3" class="li1"><a href="#" onmousemove="dj(3)">CCCC</a></div></td>

<td width="100"><div align="center" id="a4" class="li1"><a href="#" onmousemove="dj(4)">DDDD</a></div></td>

</tr>

<tr>

<td height="150" colspan="4">

<div align="center" id="b1">A栏目下的内容</div>

<div align="center" id="b2" style="display:none">B栏目下的内容</div>

<div align="center" id="b3" style="display:none">C栏目下的内容</div>

<div align="center" id="b4" style="display:none">D栏目下的内容</div>

</td>

</tr>

</table>

</body>

<script>

function dj(i)

{

for(j=1;j<5;j++) //遍历刷新所有门的状态，序号与参数相同的的一种状态，其余一种状态

{

if(i==j){

document.getElementById("a"+j).className="li2";

document.getElementById("b"+j).style.display="";

}

else

{

document.getElementById("a"+j).className="li1";

document.getElementById("b"+j).style.display="none";

}

}

}

</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航