jQuery+CSS实现的菜单效果

jQuery+CSS实现的菜单效果

Jquery是继prototype之后又一个优秀的Javascrīpt框架，至今已吸引了来自世界各地的众多javascript高手加入其team。在页面当中凡是涉及到前端事件和动画效果的大多数都和Jquery有关。本篇博客做一个Jquery+CSS的小DEMO，来实现菜单的动画效果。希望大家有所收获。

这个DEMO需要准备的东西有5张图片，和Jquery动画效果扩展插件jquery.easing.js1.3

 

下面写这个例子的制作步骤：

1.     写前端HTML代码：

[html]

1. <ul>  
2.             <li class="green">  
3.                   <p><a href="#">主页</a></p>  
4.                   <p class="subtext">首页</p>  
5.             </li>  
6.             <li class="yellow">  
7.                   <p><a href="#">提高班</a></p>  
8.                   <p class="subtext">八期</p>  
9.             <p class="subtext">七期</p>  
10.             <p class="subtext">六期</p>  
11.             </li>  
12.             <li class="red">  
13.                   <p><a href="#">中国</a></p>  
14.                   <p class="subtext">北京</p>  
15.             </li>  
16.             <li class="blue">  
17.                   <p><a href="#">美国</a></p>  
18.                   <p class="subtext">纽约</p>  
19.             </li>  
20.             <li class="purple">  
21.                   <p><a href="#">澳大利亚</a></p>  
22.                   <p class="subtext">堪培拉</p>  
23.             </li>  
24.       </ul>  

2.     设置菜单的CSS样式 

[css]

1. body  
2. {  
3.     font-family:@微软雅黑;  
4.     background:#f3f3f3;  
5.     }  
6. ul  
7. {  
8.     margin:0;  
9.     padding:0;  
10.     }  
11. li  
12. {  
13.     width:100px;  
14.     height:50px;  
15.     float:left;  
16.     color:#191919;  
17.     text-align:center;  
18.     overflow:hidden;  
19.     }  
20. a  
21. {  
22.     color:#fff;  
23.     text-decoration:none;  
24.     }  
25. p  
26. {  
27.     padding:0px 5px;  
28.     }  
29. .subtext  
30. {  
31.     padding-top:15px;  
32.     }  
33.      
34. .green{background:#6aa63b url('images/green-item-bg.jpg')top left no-repeat;}  
35. .yellow{background:#FBC700 url('images/yellow-item-bg.jpg')top left no-repeat;}  
36. .red{background:#D52100 url('images/red-item-bg.jpg')top left no-repeat;}  
37. .purple{background:#5122B4 url('images/purple-item-bg.jpg')top left no-repeat;}  
38. .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代码

 

[javascript]

1. <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />  
2.     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
3.     <%--导入jquery动画效果扩展插件jquery.easing.js 1.3--%>  
4.     <script src="jquery.easing.1.3.js" type="text/javascript"></script>  
5.     <script type="text/javascript" >  
6.         $(document).ready(function(){  
7.          
8.             //注册超链接的单击事件   
9.             $("a").click(function(){  
10.                 $(this).blur();      //失去焦点触发的事件   
11.             });  
12.              
13.             //鼠标移到li上边的事件   
14.             $("li").mouseover(function(){  
15.                 //停在指定的元素上(stop)自定义动画(animate)   
16.                 $(this).stop().animate({height: '200px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })  
17.             });  
18.    
19.             //鼠标移出li的事件   
20.             $("li").mouseout(function(){  
21.                 $(this).stop().animate({height:'50px'},{queue:false,duration:600,easing:'easeOutBounce'});  
22.             });  
23.    
24.         });  
25.    
26.     </script>  

到此我们已经把效果做出来了，效果如下图所示：