筆者有介紹過一個 Background-Position Animation Plugin，它讓 jQuery.animate 能支援原本所不支援的 background-position 屬性。所以我們就能使用它來做到更多有趣的動畫效果，像這次要教的翻選式選單也是玩玩 background-position 屬性的。
選單的部份筆者是用 ul 來做的：
1
2
3
4
5
6
7
8
| <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 裡面的連結而加上不同的背景圖片；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| #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 來做動畫效果囉：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(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 也需要配合修改一下，整個範例語法為：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <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 差到那唷。
