经常上网的时候我们能注意到一个东西，那就是类似搜狐网易等等门户网站的频道切换效果，这个效果即好看又不
占用地方而且动态效果好，是一个很好的东西，所以今天打算模拟一下这个效果。大概用到的东西就是
HTML+CSS+JavaScript。
好了，废话不多说，直接上代码，首先是HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>souhu.html</title> <script type="text/javascript"> function change(val,obj){ obj.style.backgroundColor="#FFC12D"; if(val=='zs'){ zs.style.display='block'; rz.style.display='none'; }else if(val=='rz'){ zs.style.display='none'; rz.style.display='block'; } } function change2(obj){ obj.style.backgroundColor="silver"; } </script> <link rel="stylesheet" href="../css/souhu.css" type="text/css"></link> </head> <body> <div class="div1"> <div class="navi"> <ul> <li οnmοusemοve="change('zs',this);" οnmοuseοut="change2(this);">招生</li> <li οnmοusemοve="change('rz',this);" οnmοuseοut="change2(this);">热招</li> <li>出国</li> </ul> </div> <!-- 超链接DIV --> <div class="zs" id="zs" > <ul> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> <li> <a href="#">招生招生招生招生</a></li> </ul> </div> <div class="rz" id="rz"> <ul> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> <li> <a href="#">热招热招热招热招</a></li> </ul> </div> </div> </body> </html> 这里就是HTML的代码，然后上CSS的代码
body{ font-size: 12px; } .div1{ width: 126px; height: 156px; } .navi{ width: 21px; height: 156px; float: left; } .navi li{ list-style-type: none; background-color: silver; margin-top: 2px; width: 21px; height: 50px; float: left; text-align: center; padding-top: 8px; } .navi ul{ padding: 0px; margin-left: 0px; float: left; } .zs{ display: none; width: 101px; height: 156px; background-color: silver; float: left; margin-left: 4px; } .zs ul{ padding: 0px; margin-left: 0px; float: left; } .zs ul li{ list-style-type: none; line-height: 20px; height: 17px; float: left; } .rz{ display: block; width: 101px; height: 156px; background-color: silver; float: left; margin-left: 4px; position: absolute; } .rz ul{ padding: 0px; margin-left: 0px; float: left; } .rz ul li{ list-style-type: none; line-height: 20px; height: 17px; float: left; } 这样就实现了频道切换的效果，效果如如下
相关资源：新年快乐! python实现绚烂的烟花绽放效果
