如何用CSS製作一個圓形放大鏡
話說圖片放大,這是一個再容易不過的效果了。當然,今天說的可不是簡簡單單的在一個框裡放大,而是一個圓。就像放大鏡或是狙擊鏡那樣,只有圓圈裡的放大,圈外的當然還是原來的圖片。這是不是很不可思議? 當然不是。做過Flash的也許會脫口而出:套個蒙版就是了。可惜CSS不是Flash,沒有那一套。我們只有從CSS裡面慢慢挖掘。
先說IE,因為IE有濾鏡,可以實現許多意想不到的功能。先來整理下我們的目標:
1.放大一副圖片
2.只顯示其中的一個圓
3.圓外是透明的
圖片的縮放可以透過img元素的拉伸來實現。接著蓋上一張透明畫素畫的實心圓,因此正好只顯示出放大後中心圓圈部分。但第3步可就不對了,雖然之前加蓋了一張透明圓形的gif圖片,螢幕上確實出現了一個放大過的圓形圖片,但圓圈的外面卻變成加蓋圖片的背景色了,因為這張圖片是在最上層了。到此你或許在想給其中某些元素加些透明度什麼的,事實上無論給哪個層加透明度都是徒勞的。因為此時無非就兩種情況:圓圈外被背景色覆蓋;背景色透明的話就是一個矩形的放大,而不是圓形。我們所希望的是:蒙版的背景色透明,並且在此位置下面的放大圖也跟著透明。
對於IE來說,這並非難事,因為IE有濾鏡。如果你熟悉的話應該早就想到了Chroma濾鏡,這是一個很重要的濾鏡,因為他能把一個層裡的指定顏色變成透明色!這不正是我們期待嗎。我們新建一個層,層裡面分別疊上放大圖片(後)和蒙版圖片(前),就是為了讓他們合併到這個新建層裡。我們給這個新建層設定Chroma濾鏡,因為他們的子層都在此合併畫素了,所以圓圈外那部分背景色透明後,取而代之的就是原圖片。這就是我們最終想要的效果。
值得注意的是,Chroma濾鏡在給指定的蒙版背景色透明的時候,圓圈裡同樣的顏色也會一起透明掉,所以要給蒙版設定一個非常少見的背景色,儘可能減少圓圈裡的透明畫素點。
IE上面的解決方案還算簡單,非IE的呢?你當然會說canvas,因為圖形方面他是萬能的。如果CSS上確實找不到辦法,我們也只能用canvas。不過可別忘了那些非IE的主流瀏覽器幾乎都是支援CSS3的。CSS3雖然沒有像Chroma濾鏡那樣的效果,但是對於本例這樣的效果還是綽綽有餘的:因為我們只想要一個放大了的圓形圖片,而CSS3天生就支援畫圓。
CSS3支援層的圓角,例如border-radius:5px,就能給層的4個方角變為半徑5px的圓角。我們不妨將其運用到極限,給一個100*100的層設定一個border-radius:50px圓角,這時可就是一個圓滾滾的層了!層裡面的內容當然不會限制在圓角里面,但層的背景圖片會。並且CSS3是支援背景圖片縮放的,本例到此也就迎刃而解了。
前面關鍵的問題都以解決,下面就實現一個狙擊瞄準器的效果,並支援滾輪縮放。為了使程式碼更清晰,本例分別為IE,FF及其他瀏覽器做了3個版本,透過Demo頁面能夠自動轉跳。
用同樣的原理,製作了一個圖片放大鏡外掛:Image Magnifier Flugin。
支援所有主流瀏覽器(ie8有個絕對定位的bug,所以需要ie7的相容模式)
外掛使用非常簡單,在需要放大的上設定 bigsrc 屬性即可,bigsrc就是清晰大圖(當然需要和原圖保持同樣的尺寸比例)。
外掛需要的檔案:
Magnifier-min.js
mask.png
pic.png
blank.ico
儲存在一起即可。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/855/viewspace-2800330/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何用 css 畫一個心形CSS
- 圓形放大的hover效果
- css繪製圓形程式碼例項CSS
- Dreamweaver中CSS怎麼製作徑向圓形漸變的五種方法CSS
- 如何用PS製作一個小泡泡呢?
- 如何用pscc 2018圓角外掛mac版製作倒圓角Mac
- 一個圓形時鐘
- css3 製作圓環進度條CSSS3
- 如何用 vue 製作一個探探滑動元件Vue元件
- ❤️❌ 如何用vue製作一個探探滑動元件Vue元件
- 如何製作一個《黑鏡:潘達斯奈基》
- canvas 繪製圓形Canvas
- CSS圓形圖片效果CSS
- 如何用純CSS繪製三角形--02CSS
- 如何用純CSS繪製三角形--03CSS
- 用CSS製作三角形.CSS
- 如何用純 CSS 創作一個搖搖晃晃的 loaderCSS
- jQuery放大鏡jQuery
- 用CSS繪製一個三角形CSS
- 如何用html實現圓形雲臺HTML
- SVG <circle> 繪製圓形SVG
- css-製作三角形方法CSS
- CSS 繪製半圓CSS
- CSS 繪製圓環CSS
- 使用css製作滑鼠經過圖片時,放大圖片1.5倍CSS
- jQuery 放大鏡效果jQuery
- 淘寶放大鏡
- 京東放大鏡效果
- Mac顯示放大鏡Mac
- 使用clay.js繪製一棵圓形樹JS
- CSS3圓形進度條效果CSSS3
- Unity製作特寫鏡頭Unity
- html+css+js製作一個簡易計算器HTMLCSSJS
- css繪製特殊圖形CSS
- 使用css繪製圖形CSS
- CSS繪製橢圓程式碼CSS
- 如何製作一款Galgame(二):galgame分幕,分鏡創作和演出製作GAM
- 製作一個不規則形狀有哪些方法可以實現?