Shulou(Shulou.com)06/01 Report--

1. Compatibility problem

Zoom is not a standard attribute of css, Firefox and Opera Mini do not support it, but other standard browsers can support it very well. Ie has supported this attribute since ie6. This attribute is risky to use, such as considering the compatibility of Firefox.

Tranform:scale (x) is a standard attribute of css and is supported by almost all standard browsers except Opera Mini. Ie browsers are supported after ie11, but future browsers of ie9 and ie9 support the prefixed attribute-ms-transform. If your web page is compatible with ie8 and its previous ie browsers, you need to do compatibility processing, in fact, a better way is to quit, now what era, how is it possible to be compatible with such an old browser, of course, I am joking, after all, you are poor, how can you easily quit.

two。 Value problem

The value of zoom can be normal, a floating point number greater than or equal to 0, or a percentage greater than or equal to 0. Among them, normal is the actual size of the element, neither shrinking nor expanding, quietly like a virgin. When the value of zoom is 0, zoom is neither scaled nor scaled, as is the case when zoom is 1.

The value of transform:scale (x) can only be a number, not a percentage or anything else, but the value can be positive or negative and 0. When x is 0, the element directly shrinks to disappear. When x is negative, the element rotates 180 degrees clockwise or counterclockwise. I don't know. It's upside down anyway. I'm talking about the 2d plane, the 3D plane I didn't study.

And scale can use scaleX (), scaleY (), scaleZ () to enlarge x, y, z different axes separately. Zoom can only be magnified proportionally.

3. Display effect 3.1 scaling point

Zoom is scaled with an origin in the upper left corner, and this point cannot be changed by default. If you want to zoom in and out of the center, you need to use js to change the position of the elements dynamically, or if you are an awesome person, you can consider using the matrix transformation of ie. Although my college entrance examination math is not lower than 130, but I still do not understand what the matrix transformation of ie is all about.

By default, the change of transfrom:scale (x) is based on the center point, and the point of this change can be changed through transform-origin.

3.2 position

The element scaled by zoom occupies the actual position. For example, the element of zoom is followed by a div named other. When the element is zoomed in, the div named other is also squeezed out.

While the element scaled by scale does not occupy the actual position, the element magnified by scale looks very large, but the actual position is still as small as before. So other elements don't change their positions.

It is also important to note that although the enlarged element of the scale does not occupy the actual position, it can still respond to the event.

Whether the element is zoomed in or out using zoom or scale, if a click event is bound to the element, the click element will respond to the event.

4. Performance

Because zoom actually changes the size of objects, and this change affects other elements, using zoom will cause browsers to re-render with poor performance. While scale changes only the target elements alone, it does not affect other elements, so the performance will be better.

5. Click to view the page effect

Click to see the effect

Room&scale html,body {margin:0px; padding:0px;} div {text-align: center;} h3 {text-align: center; padding-bottom: 20px; margin:0px; border-bottom: 1px dashed black } .content {width: 100px; margin: auto; height: 2000px; border-left:1px solid black; position: relative;} / * zoom*/ .zoomW {position: relative;} .div1 {width: 100px; height:100px Top:0px; left:0px; position: absolute; border: 1px solid blue;} .div2 {width: 100px; height: 100px; zoom:2; top:0px; left:0px; position: absolute; border: 1px solid green } .div3 {width: 100px; height: 100px; zoom:4; top:0px; left:0px; position: absolute; border: 1px solid red;} .div4 {width: 50px; height: 50px; border: 1px solid yellow } / * scale*/ .zoomT2, .scaleT {margin-top:600px;} .scaleW {position: relative;} .scaleW div {/ * transform-origin:0 0 prevalent /} .div5 {width: 100px; height:100px Top:0px; left:0px; position: absolute; border: 1px solid blue;} .div6 {width: 100px; height: 100px; transform: scale (2);-webkit-transform: scale (2); top:0px; left:0px Position: absolute; border: 1px solid green;} .div7 {width: 100px; height: 100px;-webkit-transform: scale (4); top:0px; left:0px; position: absolute; border: 1px solid red } .div8 {width: 50px; height: 50px; border:1px solid yellow;} .other {width: 100px; height: 100px; border:1px solid darkblue;} .zoomO1 {width: 100px; height: 100px; zoom:1 Outline: 1px solid blue;} .zoomO2 {width: 100px; height: 100px; zoom:2; outline: 1px solid green;} .scaleO1 {width: 100px; height: 100px; outline: 1px solid blue;} .scaleO2 {width: 100px Height: 100px; transform: scale (2);-webkit-transform: scale (2); outline: 1px solid green } zoom div1 div2 div3 scale Div5 div6 div7 zoom&other zoom:1 Zoom:2 other scale&other scale (1) other Scale (2) other var zoomO2 = document.querySelector (".zoomO2") ZoomO2.onclick=function () {console.log ("zoomO2");} var scaleO2 = document.querySelector (".scaleO2"); scaleO2.onclick=function () {console.log ("scaleO2");}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.