Home > Developer > Web Develop
Image magnification, this is a relatively easy effect. Of course, what we're talking about today is not a simple enlargement in a box, but a circle. Just like a magnifying glass or a sniper mirror, only the enlargement in the circle, the outside of the circle is of course the original picture. Isn't that amazing? Of course not. Do flash may be blurted out: set a mask just. Unfortunately CSS is not flash, there is no that set. We only have to dig through the CSS.
First say IE, because IE has filters, can achieve many unexpected features. First of all to tidy up our goal: Tiantai Yi Zhuang Metallurgy
Effect Demo<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "><title>css magnification will effect </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></pead><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> <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 +); var top = Math.Round (-zoomrate * y + +); Stymask.backgroun Dposition = 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></ptml>
The zoom of the image can be achieved by stretching the IMG element. It then covers a solid circle with a transparent pixel, so it just shows the center circle portion of the zoomed-in image. But the 3rd step is not right, although a transparent circular gif was affixed to the screen, there is indeed a magnified circular image, but the outside of the circle becomes the background color of the stamped picture, because this picture is on the top. In this case, you might want to add some transparency to some of these elements, and in fact no matter which layer you add transparency to is futile. Because at this time there are only two cases: outside the circle is covered by the background color, the background color transparent is a rectangular enlargement, rather than a circle. What we want is: the background color of the mask is transparent, and the enlarged image below this position is also transparent.
For IE, this is not difficult, because IE has filters. If you're familiar with it, you should have thought of it. Chroma filter, this is a very important filter, because he can make a layer of the specified color into a transparent color! That's not what we expect. We create a new layer, stacked with enlarged images (rear) and mask images (front), to allow them to merge into the new layer. We set the chroma filter for this new layer because their children are merging pixels here, so the background color outside the circle is transparent and replaced by the original image. That's what we want to end up with.
It is important to note that the chroma filter is transparent to the specified mask background color, the same color in the circle is also transparent, so to set a very rare background color for the mask, minimizing the transparent pixels in the circle.
IE above the solution is simple, non-ie? Of course you can say canvas, because he is omnipotent in graphics. If the CSS does not find a way, we can only use canvas. But do not forget that those non-ie mainstream browser almost all support CSS3. CSS3 is not as effective as the Chroma filter, but it is more than enough for this example: because we only want a magnified circular picture, and CSS3 is born to support the circle.
CSS3 the rounded corners of the support layer, such as border-radius:5px, can turn the 4 square corners of the layer into rounded corners with a radius of 5px. We may as well apply it to the limit, to a 100*100 layer to set a border-radius:50px fillet, this can be a pudgy layer! The contents of the layer are certainly not limited to the rounded corners, but the background image of the layer will be. And CSS3 is to support the background image scaling, this example will be solved.
The key problem is solved, the following is the effect of a sniper sighting, and support for wheel zoom. In order to make the code clearer, this example has 3 versions for IE,FF and other browsers, which can be automatically skipped via the demo page.
Of course, if we improve, we can also use a PNG image as a mask, with some gradual transparency, more like the glass material.
CSS implementation Magnifier/Sniper Mirror Effect
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
