標籤：style http color io os ar sp div on
圖片放大，這是一個比較容易的效果了。當然，今天說的可不是簡簡單單的在一個框裡放大，而是一個圓。就像放大鏡或是狙擊鏡那樣，只有圓圈裡的放大，圈外的當然還是原來的圖片。這是不是很不可思議？ 當然不是。做過Flash的也許會脫口而出：套個蒙版就是了。可惜CSS不是Flash，沒有那一套。我們只有從CSS裡面慢慢挖掘。
先說IE，因為IE有濾鏡，可以實現許多意想不到的功能。先來整理下我們的目標：天台縣羿壯冶金
效果示範<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS放大將效果</title><style>html, body {border: none;overflow: hidden;}body {background: url(../../images/201201/2012_01_08_01.jpg);cursor: crosshair;}#divBox {position: absolute;}#divBox * {position: absolute;}#divMask {width: 160px;height: 160px;border-radius: 80px;background: #000 url(../../images/201201/2012_01_08_01.jpg) no-repeat;}#divZoom {width: 100px;left: 60px;top: 135px;font-size: 9px;font-family: "Times New Roman";-webkit-text-size-adjust: none;color: #FFF;}</style></head><body ondragstart="return false"><div id="divBox" style="left: 720px; top: 218px; "> <div id="divMask" style="background-size: 2560px 1600px; background-position: -1520px -516px; "></div> <img src="../../images/201201/Box.gif"> <div id="divZoom">ZOOM 2.0</div></div><script>function $(v){return document.getElementById(v)}var styBox = $("divBox").style;var styMask = $("divMask").style;var RATE_MIN = 1.5;var RATE_MAX = 4;var RATE_INC = 0.1;var IMG_W = 1280;var IMG_H = 800;var ZoomRate = 2;ImgZoom();function ImgZoom(){var width = Math.round(IMG_W * ZoomRate);var height = Math.round(IMG_H * ZoomRate);styMask.backgroundSize = width + "px " + height + "px";$("divZoom").innerHTML = "ZOOM " + ZoomRate.toFixed(1);}function ImgMove(x,y){var left = Math.round(-ZoomRate * x + 80);var top = Math.round(-ZoomRate * y + 80);styMask.backgroundPosition = left + "px " + top + "px";}document.onmousedown = function(){event.preventDefault();}document.onmousemove = function(){styBox.pixelLeft = event.x - 80;styBox.pixelTop = event.y - 80;ImgMove(event.x, event.y);}document.onmousewheel = function(){ZoomRate += (event.wheelDelta>0?RATE_INC:-RATE_INC);if(ZoomRate < RATE_MIN)ZoomRate = RATE_MIN;else if(ZoomRate > RATE_MAX)ZoomRate = RATE_MAX;ImgZoom();ImgMove(event.x, event.y);}</script></body></html>
圖片的縮放可以通過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頁面能夠自動轉跳。
當然，如果再改進的話我們還可以用png圖片作為蒙版，帶上一些漸層的透明度，就更像玻璃的材質了。
CSS實現放大鏡/狙擊鏡效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
