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>
到此我們已經把效果做出來了,效果如下圖所示: