您的位置：首页 > Web前端 > CSS

JS+CSS实现的非常漂亮的橘黄色滑动门

2011-05-09 09:40 603 查看

代码简介：

JS+CSS实现的非常漂亮的橘黄色滑动门，记得有个CSS文件，很棒的。

代码内容：

<!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" lang="zh-CN">
<head>
<title>JS+CSS实现的非常漂亮的橘黄色滑动门_网页代码站(www.webdm.cn)</title>
<link href="http://www.webdm.cn/images/20091230/huadongmen.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#a {
width: 970px;
font-size: 14px;
text-align: center;
color: #000000;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>

<br />
<br />

<script language="javascript">
function qiehuan(num){
for(var id = 0;id<=9;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
</script>
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>

<LI class="menu_line"></LI><li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>项目交易</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>技术文章</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>编程开发</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>网页模板</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>字体下载</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>广告代码</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>酷站欣赏</span></a></li><li class="menu_line"></li>
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#"><SPAN>网页特效</SPAN></A></LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank><SPAN>论坛</SPAN></A></LI>
<LI class=menu_line></LI>
</UL>
<div id=menu_con><div id=qh_con0 style="DISPLAY: block">
<UL>
<LI><a href="http://www.webdm.cn"><span>网页代码站</span></A></LI>
<LI class=menu_line2></LI><LI><A href="#"><SPAN>网页特效</SPAN></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>广告代码</SPAN></A></LI></UL></div>
<div id=qh_con1 style="DISPLAY: none">
<UL><LI><a href="/"><span>网页代码站</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>导航条代码</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con2 style="DISPLAY: none">
<UL><LI><a href="/"><span>网页代码站</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con3 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con4 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con5 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con6 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>fffffffffffffffffff</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con7 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>gggggggggggggggg</SPAN></A></LI><LI class=menu_line2></LI></UL></div>
<div id=qh_con8 style="DISPLAY: none">
<UL><LI>##############################</LI></UL></div>
<div id=qh_con9 style="DISPLAY: none">
<UL><LI>###############################</LI></UL></div> </div></div></div></div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/0a90cc98-28e4-4cbd-bc25-53b128acf111.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航