[Share] Use CSS to create a circular magnifier

It is easier to enlarge the image. Of course, what we are talking about today is not simply enlarging in a box, but a circle. Just like a magnifier or sniper mirror, only the magnification in the circle is the original picture. Is that incredible? Of course not. Flash may be blurted out: Set a mask. Unfortunately, CSS is not flash. We only need to slowly explore from CSS.

Let's talk about Ie first. Because IE has filters, many unexpected functions can be implemented. Let's sort out our goals:
1. Enlarge an image
2. Only one circle is displayed.
3. The circle is transparent.

Image Scaling can be achieved through the stretching of the IMG element. Then cover the solid circle of a transparent scroll painting, so only the center circle is displayed after the enlargement. However, step 2 is not correct. Although a GIF image with a transparent circle has been attached, a enlarged circular image does appear on the screen, however, the background color of the image is added to the outside of the circle, because the image is on the top. At this point, you may want to add some transparency or something to some of the elements. In fact, no matter which layer you add transparency to, it is futile. This is because there are only two situations: the background color is covered outside the circle; if the background color is transparent, a rectangle is enlarged, not a circle. What we want is that the background color of the mask is transparent, and the enlarged image below this position is transparent.

For IE, This is not difficult, because IE has a filter. If you are familiar with it, you should have thought of the chroma filter. This is a very important filter, because it can change the specified color in a layer into transparent color! Isn't that what we expect. We create a new layer, which is stacked with enlarged images (after) and masked images (Before) to merge them into the new layer. We set the chroma filter for this new layer. Because their child layers merge pixels here, the background color outside the circle is transparent and replaced by the original image. This is what we finally want.

It is worth noting that,When the chroma filter is transparent to the specified mask background color, the same color in the circle will also be transparent together, so you need to set a very rare background color for the mask, minimize the number of transparent pixels in the circle.

　

 

The solution above IE is relatively simple. What about non-ie solutions? Of course you will say that canvas is omnipotent in terms of graphics. If no method is found on CSS, we can only use canvas. But don't forget that almost all mainstream non-ie browsers support css3. Although css3 does not have the same effect as the chroma filter, it is more than enough for the effect of this example: Because we only want a enlarged circular image, and css3 naturally supports circle painting.

Css3 supports layer rounded corners. For example, border-radius: 5px, the four corners of the layer can be changed to rounded corners with a radius of 5px. We may wish to apply it to the limit and set a border-radius: 50px rounded corner for a layer of 100*100. This is a rolling layer! The content in the layer is certainly not limited to the rounded corner, but the background image of the layer will. In addition, css3 supports the scaling of background images, which is easily solved in this example.

The preceding key problems are solved. The following describes how to implement a sniper sight and support scroll wheel scaling. To make the code clearer, we have made three versions for IE, FF and other browsers respectively. The demo page can be used to automatically jump.

Demo:

Http://www.etherdream.com/funnyscript/zoom/Demo.html

Of course, if we want to improve it, we can also use the PNG image as a mask, with some gradient transparency, more like the glass material. (2010/12/20)

 

 

With the same principle, an image magnifier plug-in is created:Image magnifier flugin.

Supports all mainstream browsers (IE8 has an absolute bug, so IE7 compatibility mode is required)

Preview address: http://www.etherdream.com/FunnyScript/Magnifier/Demo.html

The plug-in is very simple to use.AboveBigsrcAttribute. bigsrc is a clear big image (the size ratio must be the same as that of the source image ).

Files required by the plug-in:
Magnifier-min.js
Mask.png
Pic.png
Blank. ICO
Save them together. )