利用CSS製造放大效果

這篇已經說好久,今天總算生出來了,不過沒弄的很詳盡就是。基本上我這次的範例是比較適合用在固定的東西,例如導覽列,或是選單目錄之類的東西,我的範例本身是套在導覽列上很方便啦^^,如果是行內物件的話(可以用在連結之類的),我還要做些測試。

廢話不多說,要製造一個mouseover的放大效果,基本的作法很簡單,就是利用:hover這個選擇子來把元素放大,讓我們來看看光這樣子會是怎樣,範例一

我製造了四個常寬都是50px的元素(我用標準的算法,是加上paddin值的長寬),雖然是span標籤,但是因為我用了display: block;這個屬性,所以他們現在都是block物件了,也因此我需要用float: left;才能讓他們並排,並且我設定他們在滑鼠移過去時會讓長寬都變成100px。這樣就完成最基本的設定了,不過還有幾個問題,第一是下面的內容會隨著放大的效果上下移動,第二是元素之間的左右位置也會因為放大而跑來跑去,第三則是框線的問題,中間三條線特別粗。

我們先來解決第一個問題,要處理這個問題很間單,只要指定margin-bottom: -50px;就可以了,結果見範例二。同樣的原理,我們也可以讓放大的效果變成往上放大,見範例三。不過我想最多人會希望置中放大,所以就見範例四。在範例四裡面,我是設定span的margin: -25px 0 -25px;,只有三個值的狀況下,依順序分別是top、left and right、bottom,事實上我也可以改成,margin: -25px 0;,這樣就變成top and bottom、left and right了。

如果第一個問題的處理方法了解的話,事實上第二個問題也是一樣的方法處理,我們直接拿範例四的置中放大來做修改,見範例五,在這裡我做了些改變,就是本來放大成100*100的方塊,我改成75*75了,這樣改的原因是如果放太大的話,會造成移到旁邊的方塊變的不容易,想像個極端的例子,你滑鼠移到的方塊如果大到蓋住旁邊的物件,不就選不到了嗎XD。講那麼多,都沒講到重點,在這個範例中我把margin改成左右都是-12.5px

接下來要處理第三個問題了,中間的幾條線會比較粗的原因是因為左右物件都有左右框線,雖然設定是1px,但是兩條放在一起就變兩倍粗了。為了處理這個問題,我用了:last-child這個選擇器,然後除了最後一個物件以外,右邊的框線都設成0,結果就是範例六,事實上這個範例還不只修改框線的設定而已,因為用上:last-child這個選擇子,我必須要一物件把這四個span包起來,不然在:last-child的使用上會有困難(他會認為後面的p才是最後一個物件)。基於這點,我乾脆改成list,不過實際上用div標籤包一下就可以了。另外就是margin我改成了-13px,因為本來沒放大的物件少了一邊的框線,但是放大後又復原了,所以必須要增加margin的負值,把多出來的框線的空間補回來。就這樣,完成了這次的目標了,我想我沒漏掉什麼沒修改到才是。

最後附上一個突然想到的東西,本來是想用:nth-child()來做的,不過Firefox都還不支援,所以用了其他方法,也造成CSS比較難看,而且比較難擴充@_@。我是覺得這可能可以配合圖片玩些東西啦:P。