189 8069 5689

zoom与scale的异同点

1.兼容性问题

zoom不是css的标准属性,Firefox和Opera Mini 不支持,其他标准的浏览器倒是都可以很好的支持。ie从ie6以后就开始支持这个属性。这个属性用起来有风险,比如要考虑Firefox的兼容性问题。

创新互联建站专注于沧州网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供沧州营销型网站建设,沧州网站制作、沧州网页设计、沧州网站官网定制、小程序定制开发服务,打造沧州网络公司原创品牌,更为您提供沧州网站排名全网营销落地服务。

tranform:scale(x) 则是css的标准属性,除Opera Mini外,得到了几乎所有标准浏览器的支持。ie浏览器是在ie11后开始支持,不过ie9和ie9以后的浏览器都支持带前缀的属性-ms-transform。如果你的网页要兼容ie8及其以前的ie浏览器,就需要做兼容性处理,其实更好的办法是离职吧,现在都什么时代了,怎么可能还要兼容这么古老的浏览器,当然了,我是开玩笑的,毕竟你穷,怎么可以轻易离职。

2.取值问题

zoom的取值可以normal,可以是大于等于0的浮点数,也可以是大于等于0的百分比。其中normal就是元素实际的尺寸,不缩也不放,安安静静的像一个处子。当zoom的值为0时,zoom也是不缩也不放,跟zoom为1的情况一样

transform:scale(x)的取值只能是数字,不能是百分比或者其他,但是取值可以是正数也可以是负数和0。其中x为0的时候,元素直接缩到消失不见了。x为负数的时候,元素会顺时针旋转180度,也可能是逆时针,我也不知道反正上下颠倒了。我指的是2d平面,3d的平面我没研究。

而且scale是可以使用scaleX()、scaleY()、scaleZ()单独放大x、y、z不同轴。zoom只能等比放大。

3.显示效果

3.1缩放点

zoom是以左上角有原点进行缩放的,并且默认这个点还不能改变。如果要要实现中心的放大缩小的效果就需要动用下js动态改变元素的位置,或者你要是个牛逼哄哄的人,你就可以考虑使用ie的矩阵变换。虽然我高考数学不低130,但是我还是看不懂ie的矩阵变换到底是咋回事。

transfrom:scale(x)的变化默认是以中心点为准变化的,而且这个变化的点是可以通过transform-origin进行改变。

3.2位置

zoom缩放后的元素是占据实际位置的。比如zoom的元素后紧跟一个名字叫other的div。元素被放大后名字叫other的div也被挤下去了。

而scale缩放的元素是不占据实际位置的,被scale放大的元素,看起来很大,但是实际占据的位置还是之前那么小。所以其他元素并不会因此而改变位置。

还有一点需要注意,虽然scale被放大的元素不占据实际位置,但是还是可以响应事件的。

无论元素是使用zoom放大缩小还是使用scale放大缩小,元素上绑定点击事件的话,点击元素都会响应事件的。

4.性能

因为zoom是实际改变物体大小的,而且这种改变会影响到其他元素,所以使用zoom的时候会引起浏览器重新渲染,性能较低。而scale是单独只改变目标元素,并不会影响到其他的元素,所以性能会好一些。

 5.点击查看页面效果


    
    room&scale
    
    
        
            

zoom

        
                                      div1            
                             div2            
                             div3                                                                     

scale

                                                   div5                                          div6                                          div7                                                            

zoom&other

                                      zoom:1                                                                                     zoom:2                                          other                              

scale&other

                                      scale(1)                                          other                                          scale(2)                                          other                                        

 


当前名称:zoom与scale的异同点
新闻来源:http://cdxtjz.cn/article/ispcgj.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。