一款经典简洁的CSS滑动门代码

网站特效主机域名网站建设站长导航热门事件阜阳校内

网页特效分类：其它游戏娱乐计算转换表单及按钮广告代码浏览器相关图片特效日期时间表格相关文本链接背景特效层和布局菜单导航

您的当前位置：网页特效 > 菜单导航 > 正文

一款经典简洁的CSS滑动门代码

分类标签：菜单导航　更新时间：10-05-03　阅读次数：
一款经典简洁的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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑动门</title> <style media="screen" type="text/css">  </style> <script type="text/javascript" language="javascript"> //<!CDATA[ function g(o){return document.getElementById(o);} function HoverLi(n){ //如果有N个标签,就将i<=N; for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab'; } //如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick; //]]> </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_"> <ul> <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);"> ASP.NET</li> <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);"> MYSQL</li> <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);"> DELPHI</li> <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);"> VB.NET</li> <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);"> JAVA</li> <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);"> PHP5</li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div> <div class="undis" id="tbc_02">这里是MYSQL的相关内容</div> <div class="undis" id="tbc_03">这里是DELPHI的相关内容</div> <div class="undis" id="tbc_04">这里是VB.NET的相关内容</div> <div class="undis" id="tbc_05">这里是JAVA的相关内容</div> <div class="undis" id="tbc_06">这里是PHP5的相关内容</b> </div> </div> </div> </body> </html>
提示:可以修改后运行.

一款经典简洁的CSS滑动门代码

本类推荐特效代码

本类特效代码阅读排行

本类最新特效代码