jQuery创建顺滑生动的菜单

曾经见过一些优秀的jQuery导航，你有想自己创建一个的冲动么？ 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

1.在head头文件里引入CSS文件

例如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link type="text/css" rel="stylesheet" href="css/style.css" />
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/common.js"></script>
 

2.在body标签里面将代码粘贴过来

<div class="box">
     <div class="banner">
         <div class="mybox">
             <div class="fPics" id="fPics">
                 <a href="" style="opacity:1;z-index:1;">
                     <img src="images/banner_01.jpg"/>
                 </a>
                 <a href="">
                     <img src="images/banner_02.jpg"/>
                 </a>
                 <a href="">
                     <img src="images/banner_03.jpg"/>
                 </a>
                 <a href="">
                     <img src="images/banner_04.jpg"/>
                 </a>
                 <a href="">
                     <img src="images/banner_05.jpg"/>
                 </a>
             </div>
             <ul class="fBtns" id="fBtns">
                 <li class="rli1">
                     <span style="width:4px"></span>
                     <a href="#"></a>
                 </li>
                 <li class="rli2">
                     <span style="width:4px"></span>
                     <a href="#"></a>
                 </li>
                 <li class="rli3">
                     <span style="width:4px"></span>
                     <a href="#"></a>
                 </li>
                 <li class="rli4">
                     <span style="width:4px"></span>
                     <a href="#"></a>
                 </li>
                 <li class="rli5">
                     <span style="width:4px"></span>
                     <a href="#"></a>
                 </li>
             </ul>
         </div>
     </div>
 </div>
 <script>
     new Bmove("#fBtns","#fPics");
 </script>