圖片放大，這是一個(gè)比較容易的效果了。當(dāng)然，今天說(shuō)的可不是簡(jiǎn)簡(jiǎn)單單的在一個(gè)框里放大，而是一個(gè)圓。就像放大鏡或是狙擊鏡那樣，只有圓圈里的放大，圈外的當(dāng)然還是原來(lái)的圖片。這是不是很不可思議？ 當(dāng)然不是。做過(guò)Flash的也許會(huì)脫口而出：套個(gè)蒙版就是了?？上SS不是Flash，沒(méi)有那一套。我們只有從CSS里面慢慢挖掘。

先說(shuō)IE，因?yàn)镮E有濾鏡，可以實(shí)現(xiàn)許多意想不到的功能。先來(lái)整理下我們的目標(biāo)：

1. 只顯示其中的一個(gè)圓
2. 圓外是透明的

圖片的縮放可以通過(guò)img元素的拉伸來(lái)實(shí)現(xiàn)。接著蓋上一張透明像素畫(huà)的實(shí)心圓，因此正好只顯示出放大后中心圓圈部分。但第3步可就不對(duì)了，雖然之前加蓋了一張透明圓形的gif圖片，屏幕上確實(shí)出現(xiàn)了一個(gè)放大過(guò)的圓形圖片，但圓圈的外面卻變成加蓋圖片的背景色了，因?yàn)檫@張圖片是在最上層了。到此你或許在想給其中某些元素加些透明度什么的，事實(shí)上無(wú)論給哪個(gè)層加透明度都是徒勞的。因?yàn)榇藭r(shí)無(wú)非就兩種情況：圓圈外被背景色覆蓋；背景色透明的話(huà)就是一個(gè)矩形的放大，而不是圓形。我們所希望的是：蒙版的背景色透明，并且在此位置下面的放大圖也跟著透明。

對(duì)于IE來(lái)說(shuō)，這并非難事，因?yàn)镮E有濾鏡。如果你熟悉的話(huà)應(yīng)該早就想到了Chroma濾鏡，這是一個(gè)很重要的濾鏡，因?yàn)樗馨岩粋€(gè)層里的指定顏色變成透明色！這不正是我們期待嗎。我們新建一個(gè)層，層里面分別疊上放大圖片(后)和蒙版圖片(前)，就是為了讓他們合并到這個(gè)新建層里。我們給這個(gè)新建層設(shè)置Chroma濾鏡，因?yàn)樗麄兊淖訉佣荚诖撕喜⑾袼亓?，所以圓圈外那部分背景色透明后，取而代之的就是原圖片。這就是我們最終想要的效果。

值得注意的是，Chroma濾鏡在給指定的蒙版背景色透明的時(shí)候，圓圈里同樣的顏色也會(huì)一起透明掉，所以要給蒙版設(shè)置一個(gè)非常少見(jiàn)的背景色，盡可能減少圓圈里的透明像素點(diǎn)。

IE上面的解決方案還算簡(jiǎn)單，非IE的呢？你當(dāng)然會(huì)說(shuō)canvas，因?yàn)閳D形方面他是萬(wàn)能的。如果CSS上確實(shí)找不到辦法，我們也只能用canvas。不過(guò)可別忘了那些非IE的主流瀏覽器幾乎都是支持CSS3的。CSS3雖然沒(méi)有像Chroma濾鏡那樣的效果，但是對(duì)于本例這樣的效果還是綽綽有余的：因?yàn)槲覀冎幌胍粋€(gè)放大了的圓形圖片，而CSS3天生就支持畫(huà)圓。

CSS3支持層的圓角，例如border-radius:5px，就能給層的4個(gè)方角變?yōu)榘霃?px的圓角。我們不妨將其運(yùn)用到極限，給一個(gè)100*100的層設(shè)置一個(gè)border-radius:50px圓角，這時(shí)可就是一個(gè)圓滾滾的層了！層里面的內(nèi)容當(dāng)然不會(huì)限制在圓角里面，但層的背景圖片會(huì)。并且CSS3是支持背景圖片縮放的，本例到此也就迎刃而解了。

前面關(guān)鍵的問(wèn)題都以解決，下面就實(shí)現(xiàn)一個(gè)狙擊瞄準(zhǔn)器的效果，并支持滾輪縮放。為了使代碼更清晰，本例分別為IE，F(xiàn)F及其他瀏覽器做了3個(gè)版本，通過(guò)Demo頁(yè)面能夠自動(dòng)轉(zhuǎn)跳。

當(dāng)然，如果再改進(jìn)的話(huà)我們還可以用png圖片作為蒙版，帶上一些漸變的透明度，就更像玻璃的材質(zhì)了。

最新評(píng)論