Jquery 超炫的导航效果-CFANZ编程社区

<!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=UTF-8" />
 <title>JS仿flash效果横向和竖向导航菜单 - 小未-http://write.blog.cs.net/postlist</title>
  <script type='text/javascript' src='roller.js' ></script>
  
  <style>
  body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  font-size: 80%;
  font-weight: bold;
  } 
  
  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }/* =-=-=-=-=-=-=-[Nav 1]-=-=-=-=-=-=-=- */
  #nav_container{
  width:145px;
  margin-left:30px;
  margin-top:30px;
  float:left;
  }
  #nav_container li{
  padding:0px;
  margin-bottom:1px;
  }
  #nav_container{
  margin-left:30px;
  }
  #nav_container a:link,#nav_container a:visited,#nav_container a:active{
  width:145px;
  background: url(images/bg3.gif)  -200px 0px repeat-x;
  height:30px;
  padding-top:5px;
  padding-left:50px;
  border-bottom:1px solid #777;
  display:block;
  text-decoration:none;
  text-align:left;
  font-weight:bold;
  color:#333;
  }
  #nav_container a:hover{
  color:#000;
  background: url(images/bg3.gif)  0px 0px repeat-x;
  }
  
  /* =-=-=-=-=-=-=-[Nav 2]-=-=-=-=-=-=-=- */ 
  #nav_container2{
  width:145px;
  margin-left:60px;
  margin-top:30px;
  float:left;
  }
  #nav_container2 li{
  padding:0px;
  margin-bottom:1px;
  }
  #nav_container2 a:link,#nav_container2 a:visited,#nav_container2 a:active{
  width:145px;
  background: url(images/bg2.gif) 0px 0px repeat-x;
  font-weight:bold;
  height:30px;
  padding-top:5px;
  padding-left:50px;
  display:block;
  text-align:left;
  border-bottom:1px solid #777;
  text-decoration:none;
  color:#333;
  }
  #nav_container2 a:hover{
  color:#000;
  background: url(images/bg2.gif)  0px -45px repeat-x;
  }
  
  /* =-=-=-=-=-=-=-[Nav 3]-=-=-=-=-=-=-=- */ 
  #nav_container3{
  width:145px;
  margin-left:60px;
  margin-top:30px;
  float:left;
  }
  #nav_container3 li{
  padding:0px;
  margin-bottom:1px;
  }
  #nav_container3 a:link,#nav_container3 a:visited,#nav_container3 a:active{
  width:145px;
  background: url(images/bg4.gif) -200px 0px repeat-x;
  font-weight:bold;
  height:30px;
  padding-top:5px;
  padding-left:50px;
  display:block;
  text-align:left;
  border-bottom:1px solid #777;
  text-decoration:none;
  color:#333;
  }
  #nav_container3 a:hover{
  color:#000;
  background: url(images/bg4.gif)  -24px 0px repeat-x;
  }
   /* =-=-=-=-=-=-=-[Nav 4]-=-=-=-=-=-=-=- */ 
  #nav_container4{
  width:788px;
  margin-left:60px;
  margin-top:30px;
  float:left;
  }
  #nav_container4 li{
  padding:0px;
  margin-bottom:1px;
  float:left;
  border-right:1px solid #ccc;
  border-left: 1px solid #888;
  }
  #nav_container4 a:link,#nav_container4 a:visited,#nav_container4 a:active{
  width:145px;
  background: url(images/bg5.gif) 0px -70px repeat-x;
  font-weight:bold;
  height:30px;
  padding-top:5px;
  display:block;
  text-align:center;
  border-bottom:1px solid #777;
  text-decoration:none;
  color:#333;
  }
  #nav_container4 a:hover{
  color:#000;
  background: url(images/bg5.gif)  0px 0px repeat-x;
  }
   /* =-=-=-=-=-=-=-[Nav 5]-=-=-=-=-=-=-=- */
  #nav_container5{
  width:145px;
  margin-left:30px;
  margin-top:30px;
  float:left;
  }
  #nav_container5 li{
  padding:0px;
  margin-bottom:1px;
  }
  #nav_container5{
  margin-left:30px;
  }
  #nav_container5 a:link,#nav_container5 a:visited,#nav_container5 a:active{
  width:145px;
  height:30px;
  padding-top:5px;
  padding-left:50px;
  border-bottom:1px solid #777;
  display:block;
  text-decoration:none;
  text-align:left;
  font-weight:bold;
  color:#333;
  text-indent:-300px;
  overflow:hidden;
  }
  #nav_container5 a:hover{
  color:#000;
  }
  
  #nav_home{
  background-image: url(images/bg7.gif);
  background-position: 0px 0px;
  }
  #nav_home:hover{
  background-image: url(images/bg7.gif);
  background-position: 0px -45px;
  }
   
  
  #nav_about{
  background-image: url(images/bg8.gif);
  background-position: 0px 0px;
  }
  #nav_about:hover{
  background-image: url(images/bg8.gif);
  background-position: 0px -45px;
  }
   
  
  #nav_port{
  background-image: url(images/bg9.gif);
  background-position: 0px 0px;
  }
  #nav_port:hover{
  background-image: url(images/bg9.gif);
  background-position: 0px -45px;
  }
   
  
  
  #nav_con{
  background-image: url(images/bg10.gif);
  background-position: 0px 0px;
  }
  #nav_con:hover{
  background-image: url(images/bg10.gif);
  background-position: 0px -45px;
  }
    </style>
  </head>
  <body>
  <div id="nav_container">
   <ul>
     <li>    
      <a href="#">Home</a>
     </li>
     <li>    
      <a href="#">About</a>
     </li>
     <li>    
      <a href="#">Portfolio</a>
     </li>
     <li>    
      <a href="#">Contact</a>
     </li>
    </ul>
  </div>
   
     <div id="nav_container2">
    <ul>
     <li>    
      <a href="#">Home</a>
     </li>
     <li>    
      <a href="#">About</a>
     </li>
     <li>    
      <a href="#">Portfolio</a>
     </li>
     <li>    
      <a href="#">Contact</a>
     </li>
    </ul>
   </div>
   
   
      <div id="nav_container3">
    <ul>
     <li>    
      <a href="#">Home</a>
     </li>
     <li>    
      <a href="#">About</a>
     </li>
     <li>    
      <a href="#">Portfolio</a>
     </li>
     <li>    
      <a href="#">Contact</a>
     </li>
    </ul>
   </div>
    <br/><br/>
 <div style="clear:both;width:100%;"></div>
   <div id="nav_container4">
    <ul>
     <li>    
      <a href="#">Home</a>
     </li>
     <li>    
      <a href="#">About</a>
     </li>
     <li>    
      <a href="#">Portfolio</a>
     </li>
     <li>    
      <a href="#">Contact</a>
     </li>
    </ul>
   </div>
 <br/><br/>
 <div style="clear:both;width:100%;"></div>
   <div id="nav_container5">
    <ul>
     <li>    
      <a id="nav_home" href="#">Home</a>
     </li>
     <li>    
      <a id="nav_about" href="#">About</a>
     </li>
     <li>    
      <a id="nav_port" href="#">Portfolio</a>
     </li>
     <li>    
      <a id="nav_con" href="#">Contact</a>
     </li>
    </ul>
   </div>
   
 <script>roller.init('nav_container','h',-200,0,100,20);
 roller.init('nav_container2','v',0,-45,100,20);
 roller.init('nav_container3','h',-200,-24,100,20);
 roller.init('nav_container4','v',-66,0,250,20);
 roller.init('nav_container5','v',0,-45,80,15);</script>
</body>
 </html>