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>