JS+CSS实现的非常漂亮的橘黄色滑动门
代码简介:
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