JQuery+CSS實現的菜單效果

         Jquery是繼prototype之後又一個優秀的Javascrīpt架構，至今已吸引了來自世界各地的眾多javascript高手加入其team。在頁面當中凡是涉及到前端事件和動畫效果的大多數都和Jquery有關。本篇部落格做一個Jquery+CSS的小DEMO，來實現菜單的動畫效果。希望大家有所收穫。

這個DEMO需要準備的東西有5張圖片，和Jquery動畫效果擴充外掛程式jquery.easing.js1.3

 

 

下面寫這個例子的製作步驟：

1.     寫前端HTML代碼：

<ul>            <li class="green">                  <p><a href="#">首頁</a></p>                  <p class="subtext">首頁</p>            </li>            <li class="yellow">                  <p><a href="#">提高班</a></p>                  <p class="subtext">八期</p>            <p class="subtext">七期</p>            <p class="subtext">六期</p>            </li>            <li class="red">                  <p><a href="#">中國</a></p>                  <p class="subtext">北京</p>            </li>            <li class="blue">                  <p><a href="#">美國</a></p>                  <p class="subtext">紐約</p>            </li>            <li class="purple">                  <p><a href="#">澳大利亞</a></p>                  <p class="subtext">堪培拉</p>            </li>      </ul>

 

2.     設定菜單的CSS樣式

 

body{    font-family:@微軟雅黑;    background:#f3f3f3;    }ul{    margin:0;    padding:0;    }li{    width:100px;    height:50px;    float:left;    color:#191919;    text-align:center;    overflow:hidden;    }a{    color:#fff;    text-decoration:none;    }p{    padding:0px 5px;    }.subtext{    padding-top:15px;    }   .green{background:#6aa63b url('images/green-item-bg.jpg')top left no-repeat;}.yellow{background:#FBC700 url('images/yellow-item-bg.jpg')top left no-repeat;}.red{background:#D52100 url('images/red-item-bg.jpg')top left no-repeat;}.purple{background:#5122B4 url('images/purple-item-bg.jpg')top left no-repeat;}.blue{background:#0292C0 url('images/blue-item-bg.jpg')top left no-repeat;}

 

3.   匯入jquery-1.4.1.js和jquery動畫效果擴充外掛程式jquery.easing.js 1.3，並編寫Jquery代碼

 

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <%--匯入jquery動畫效果擴充外掛程式jquery.easing.js 1.3--%>    <script src="jquery.easing.1.3.js" type="text/javascript"></script>    <script type="text/javascript" >        $(document).ready(function(){                   //註冊超連結的單擊事件            $("a").click(function(){                $(this).blur();      //失去焦點觸發的事件            });                       //滑鼠移到li上邊的事件            $("li").mouseover(function(){                //停在指定的元素上(stop)自訂動畫(animate)                $(this).stop().animate({height: '200px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })            });             //滑鼠移出li的事件            $("li").mouseout(function(){                $(this).stop().animate({height:'50px'},{queue:false,duration:600,easing:'easeOutBounce'});            });         });     </script>

 

到此我們已經把效果做出來了，效果如所示：