转自 : http://www.smallni.com/zoom-property/
最近在研究浏览器的zoom属性,无奈想找一点参考资料,百度谷歌一搜,出来的都是NIKE的zoom系列运动鞋,这个属性一般不为人知,甚至有些CSS手册中都查询不到。 – -#
因为这个属性最初是由 IE 浏览器制定的,无奈只能去翻MSDN的内容,一点一点的英文参阅,再参照国内一些大牛的提及,最后加上本人的一些理解和延伸阅读来写下这篇文章。希望大家不仅仅是停留在IE6 7下用zoom:1;触发hasLayout的知识程度上。
OK,先来看基础用法及兼容性吧:
1
|
zoom: { number(数字) | percentage(百分比) | normal } ;
|
Inherited继承性 | 默认值Initial | 版本Version |
否 | normal | CSSN/A |
IE | firefox | opera | safari\chrome |
ALL | 不支持 | 不支持 | 最新版的支持(safari4+\chrome4+) |
zoom可以设置或检索对象的缩放比例,其实说白了就是可以对所设置zoom值的元素进行缩放。zoom属性的值并不会继承,但它会影响到它的子元素,子元素会随着父元素一起放大或缩小。
zoom的值即代表可以放大或缩小的倍数,支持三种类型,分别是:数字、百分比、normal,所有元素默认的zoom值为normal(即使没有申明)
- 数字:无符号浮点实数,即只有正值才会起作用,如果值为1,即刚好不缩放
- 百分比:当100%时即相当于设定了数字为1,也是刚好不缩放,如果设置为120%时,即等于将元素放大1.2倍。
- 默认值normal,不设置时默认值为normal(相当于数字为1和百分比100%时的没有缩放,但要记住这只是外观,并没有申明zoom的值。如果一旦申明了,除了normal以外的其他值都是可以触发hasLayout的)
Zoom属性刚开始是IE浏览器的专有属性,Firefox、opera以及较早版本的webkit核心的浏览器并不支持。不过现在已经被逐步标准化,现在已经出现在 CSS 3.0 规范草案中,现行的 CSS 2.1 规范中不存在。详细资料请参考 MSDN 说明 : -ms-zoom Attribute | zoom Property 以及 CSS 3.0 规范草案:7.1. Properties from CSS 。
最新版本的webkit也开始支持它了,而且使用值reset,webkit可以实现不错的效果(有趣的是,IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset,页面上的其它元素在用户放大页面的时候都会跟着放大。
注:其实,我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果,不同的是,设置该属性的元素内的文字不会被放大/缩小,但是页面上的其它元素则会变化—神飞
(附上DEMO地址:htpp://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/zoom.htm 请用最新版的chrome\safari或者IE打开查看,不支持firefox和opera)
也许正是因为微软在浏览器革新上的不给力和跟W3C格格不入的状态导致了IE上各种奇怪的问题,这样就导致了它还有其他一些小作用,比如触发ie6 7的hasLayout属性(这个在我之前的文章《 hasLayout && Block Formatting Contexts》有详细讲解过)。
我们可以想象一下,一旦设置了zoom的值之后,所设置的元素就会缩放,那么宽高肯定是重新计算了,这里一旦改变zoom值时其实也会发生重新渲染(repaint),是否发生reflow,还需要各位大牛测试,本人暂时还不能测出。
zoom的本意就是缩放,当初微软发明这个属性的时候也是为了让元素能够缩放,但目前火狐、opera浏览器并不支持这个属性,那么这些浏览器用什么来缩放呢?
答案是CSS3
scale(<number>[, <number>]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D 缩放。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素 的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示 X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5);
相关推荐
【前端项目-d3-zoom.zip】是一个包含使用D3.js库实现的交互式SVG、HTML或画布平移和缩放功能的前端项目。...通过研究和理解项目的代码,可以深入理解如何在实际项目中运用D3.js来实现平滑、动态的交互式可视化。
在电商网站设计中,用户体验是至关重要的因素之一,特别是对于商品展示来说...通过研究和实践这个示例,开发者可以更好地理解和运用cloud-zoom插件,为自己的电商网站或项目增添高质量的图片放大镜功能,提高用户体验。
标题中的"Power-Zoom-Zoom-Images-with-a-Mouse-Hover_v1.44.zip"表明这是一个软件或脚本的压缩包,其功能是实现图片在鼠标悬停时的...如果你对如何实现这样的功能感兴趣,可以下载这个压缩包,研究其中的代码来学习。
在XML布局文件中,可能需要设置`ImageView`的`scaleType`属性为`matrix`,以便我们可以自定义其变换行为。 通过以上步骤,我们可以构建一个支持拖动和缩放的图片视图。在提供的压缩包`android图片拖动放大功能`中...
在Android的View体系中,ImageView可以通过设置`android:scaleType`属性来控制图片的显示方式,如中心裁剪(centerCrop)、填充(fitXY)等。但这些默认设置并不支持手势缩放,因此我们需要自定义一个可以处理手势...
虽然这一属性在标准的CSS规范中并不存在,但在IE浏览器中,通过设置zoom属性,可以让浏览器对元素进行放大缩小操作,进而触发IE浏览器的haslayout机制。 haslayout是IE浏览器中的一个内部机制,当元素拥有haslayout...
- ".fig"文件是MATLAB GUI的布局文件,它包含了界面组件的位置、大小、属性等信息。 - "TampilanGUI.fig"可能是GUI的设计布局,打开后可以查看和编辑界面的各个组件。 3. **.m文件**: - ".m"文件是MATLAB的脚本...
首先,"鹰眼"(Eagle Eye或Zoom-in/Zoom-out)在GIS中指的是地图的缩放功能。用户可以通过放大或缩小来查看地图的详细信息或全局概览。在ArcGIS Server中,这一功能通常通过JavaScript API实现,允许用户在Web浏览器...
这种操作方式对于分析大量历史数据非常有用,用户可以快速从较宽的时间跨度跳转到较窄的时间段,以便更深入地研究数据细节。 为了实现这个功能,开发者可能需要在Highstock的源代码中添加或修改一些部分。通常,这...
OpenLayers API 研究文档 OpenLayers 是一个基于 JavaScript 的开源地图库,提供了丰富的 API 用于开发基于 Web 的地图应用程序。本文档将对 OpenLayers 的一些重要 API 进行研究,包括控件、方法、类和事件处理等...
这个"安卓动画效果相关-一个PullZoom效果的库.rar"提供了一个实现PullZoom效果的库,它可能是为了帮助开发者在应用中实现类似下拉放大(Pull to Zoom)的功能,这种效果常见于新闻阅读应用或地图应用中,用户可以...
"card-image-zoom"是一个与CSS相关的项目,很可能是一个实现...通过研究这些文件,你可以学习到如何从头开始构建这样的功能,并了解实际项目中的代码组织方式。如果你想要进一步提升CSS技能,这是一个很好的实践案例。
概念格是一种基于对象和属性之间二元关系的概念层次结构,由Wille R教授在1982年提出,广泛应用于各个领域。随着大数据的爆发,传统的概念格构造方法面临挑战,其节点数量随数据量增加呈指数增长,这要求我们寻找更...
要实现zoomin和zoomout效果,可以分别设置视图的scaleX和scaleY属性,通过渐变改变这些属性值来实现放大和缩小动画。 ```java ObjectAnimator zoomIn = ObjectAnimator.ofFloat(view, "scaleX", 1f, 1.5f); ...
`PageSetup`对象提供了许多方法和属性,如`PaperSize`、`Zoom`、`FitToPagesWide`和`FitToPagesTall`等,用于设置纸张大小、缩放比例以及是否适应页面宽度和高度。 首先,我们需要了解`PageSetup.PaperSize`属性,...
MapX是一款功能强大的地理信息系统(GIS)开发工具,特别适用于高校教学和研究。本章节深入介绍MapX的基础概念,包括MapX对象体系的核心——`Map`对象,以及与其紧密相关的`DataSets`、`Layers`和`Annotations`对象...
描述中的“Flash zoom effects”可能涉及到多种技术,如Tween(缓动)函数、Matrix(矩阵)变换、DisplayObject的scaleX和scaleY属性等。Tween允许平滑地改变对象的属性,如大小,以实现平滑的缩放效果。Matrix类则...
`Structures.cs`可能包含了存储地图瓦片信息的数据结构,如类或结构体,可能包含Zoom Level、X和Y坐标等属性。`Parameters.cs`可能包含了配置参数,如地图的范围、瓦片层级、输出图像的尺寸等。 `MergeImages.cs`是...
这涉及到CSS的transform属性,包括scale(缩放)、translate(平移)等,通过这些属性,我们可以改变元素的位置和大小,以实现动画效果。 接下来,我们需要注意的是事件处理程序的设置。在JavaScript中,我们可以...