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

2024-09-05 12:19:15

字体：大中小

来源：转载

供稿：网友

一款经典简洁的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>

上一篇：带渐变效果的变色导航菜单

下一篇：一个垂直型的弹性图片菜单