筆者有介紹過一個 Background-Position Animation Plugin,它讓 jQuery.animate 能支援原本所不支援的 background-position 屬性。所以我們就能使用它來做到更多有趣的動畫效果,像這次要教的翻選式選單也是玩玩 background-position 屬性的。
選單的部份筆者是用 ul 來做的:
<h3>水平選單(圖片是垂直)</h3> <ul id="hmenu"> <li><a class="v1" href="#">男丁</a> <li><a class="v2" href="#">jQuery</a> <li><a class="v3" href="#">小神童</a> <li><a class="v4" href="#">蠟筆小新</a> </li></ul> <br class="clear"> |
在看 CSS 設定之前先來看一下選單的背景圖片
圖片雖然有上下兩排,但一開始我們只要讓它顯示上半部,當滑鼠移到選單時再切換到顯示下半部,讓整個動作有”翻”的感覺。CSS 這邊就配合 li 裡面的連結而加上不同的背景圖片;
#hmenu { margin: 0; padding: 0; list-style: none; } #hmenu li { float: left; padding: 0 5px; } #hmenu li a { display: block; height: 16px; /* 圖片的高/2 */ line-height: 16px; /* ie suck */ text-indent: -9999px; } #hmenu a.v1 { width:68px; /* 圖片的寬 */ background:url(v1.gif) no-repeat 0 0; } #hmenu a.v2 { width:67px; /* 圖片的寬 */ background:url(v2.gif) no-repeat 0 0; } #hmenu a.v3 { width:67px; /* 圖片的寬 */ background:url(v3.gif) no-repeat 0 0; } #hmenu a.v4 { width: 67px; /* 圖片的寬 */ background:url(v4.gif) no-repeat 0 0; } |
比較麻煩的是在 IE 6 中,若超連結沒設 line-height 的話,整個超連結的 height 會超出限制範圍,因此要記得加上 line-height 喔!
做到這邊就已經有個基本的雛型了,接下來就請出我們的 jQuery.animate 來做動畫效果囉:
$(function(){ // 幫 #hmenu li a 加上 hover 事件 $("#hmenu li a").hover(function(){ // 滑鼠移進選項時.. // 把背景圖片的位置往上移動 var _this = $(this), _height = _this.height() * -1; _this.stop().animate({ backgroundPosition: "(0px " + _height + "px)" }, 200); }, function(){ // 滑鼠移出選項時.. // 把背景圖片的位置移回原位 $(this).stop().animate({ backgroundPosition: "(0px 0px)" }, 200); }); }); |
這邊用到的也是很基本的 animate 而已,只是記得要引用 Background-Position Animation Plugin 才行喔。
最後我們就能來看效果哩,試著把滑鼠移到選項上面看看:
我們的選項就會往上翻轉吧,若是要往下翻轉的話,那麼就要改一開始的 background-position 及移動的位置就可以了。這題目就當成是作業讓各位自行去練習吧!
現在除了上下翻轉之外,筆者再弄個左右翻轉的範例,因為是左右的關係,所以圖片就要變化一下樣式:
當然 CSS 及 jQuery 也需要配合修改一下,整個範例語法為:
<style type="text/css"> <!-- #vmenu { margin: 0; padding: 0; list-style: none; } #vmenu li { padding: 5px 0; } #vmenu li a { display: block; height: 18px; /* 圖片的高 */ line-height: 18px; /* ie suck */ text-indent: -9999px; } #vmenu a.h1 { width:40px; /* 圖片的寬/2 */ background:url(h1.gif) no-repeat 0 0; } #vmenu a.h2 { width:46px; /* 圖片的寬/2 */ background:url(h2.gif) no-repeat 0 0; } #vmenu a.h3 { width:58px; /* 圖片的寬/2 */ background:url(h3.gif) no-repeat 0 0; } #vmenu a.h4 { width:82px; /* 圖片的寬/2 */ background:url(h4.gif) no-repeat 0 0; } --> </style> <script type="text/javascript"> <!-- $(function(){ // 幫 #hmenu li a 加上 hover 事件 $("#vmenu li a").hover(function(){ // 滑鼠移進選項時.. // 把背景圖片的位置往左移動 var _this = $(this), _width = _this.width() * -1; _this.stop().animate({ backgroundPosition: "(" + _width + "px 0)" }, 200); }, function(){ // 滑鼠移出選項時.. // 把背景圖片的位置移回原位 $(this).stop().animate({ backgroundPosition: "(0 0)" }, 200); }); }); //--> </script> <h3>垂直選單(圖片是水平)</h3> <ul id="vmenu"> <li><a class="h1" href="#">男丁</a> <li><a class="h2" href="#">jQuery</a> <li><a class="h3" href="#">小神童</a> <li><a class="h4" href="#">蠟筆小新</a> </li></ul> |
瀏覽後的效果就是改成水平的翻轉:
這樣的選單效果是不是很有趣呢?!如果再將選單做整體設計的話,那效果並不會比 Flash 差到那唷。
範例瀏覽:
http://demonstration.abgne.tw/jquery/0009/0009_1.html
http://demonstration.abgne.tw/jquery/0009/0009_2.html
http://demonstration.abgne.tw/jquery/0009/0009_3.html
http://demonstration.abgne.tw/jquery/0009/0009_4.html
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!