基本语法zoom : normal | number
语法取值normal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值使用说明
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对
象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。对于视 频对象而言是可读写的。对应的脚本特性
为 zoom 。代码示例
1 div {zoom : 0.75; }
2 .clsTeenyWeeny { zoom: 0.10 }
范例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
a{ /* 统一设置所有样式 */
font-family: Arial;
font-size: .8em;
text-align:center;
margin:3px;
}
a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */
color:
#A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:hover{ /* 鼠标经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right:1px solid #EEEEEE; }
</style>
</head>
<body>
<a href="#">首 页</a> <a href="#">课 件</a> <a href="#">教 案</a> <a href="#">试 卷</a> <a href="#">图 库</a> <a href="#">视 频
</a>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
--------------------------------------------------------------------------------------------------------------------------------------------------
添加zoom后：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
a { /* 统一设置所有样式 */
font-family: Arial;
font-size: .8em;
text-align:center;
margin:3px;
zoom:1;
}
a:link, a:visited { /* 超链接正常状态、被访问过的样式 */
color: #A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:hover { /* 鼠标经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="#">首 页</a> <a href="#">课 件</a> <a href="#">教 案</a> <a href="#">试 卷</a> <a href="#">图 库</a> <a href="#">视 频
</a>
</body>
</html>
分享到：
相关推荐
今天被问起CSS中有个zoom属性是干什么用的，虽然我知道这个属性是用来清除浮动，来触发haslayout的。但具体的定义还不是很了解，就百度了一点关于zoom属性的资料，然后总结了一下。 CSS zoom属性 zoom：设置或检索...
zoom 属性语法：zoom：normal | <number> | 默认值：normal适用于：所有元素继承性：有取值：normal：使用对象的实际尺寸。<number>：用浮点数来定义缩放比例。不允许负值<percentage>：用百分比来定义缩放比例。不...
3. **添加类名**：将 animate.css 中的动画类名添加到该元素的 `class` 属性中。例如，如果你想使用 "bounce" 动画，可以这样写： ```html 我正在弹跳！ ``` ### 动画类别 animate.css 包含了多种动画类别，包括...
在其他非IE浏览器如Firefox、Chrome、Safari等中，`zoom` 并不是一个标准的CSS属性，因此不被支持。然而，尽管其非标准性，`zoom` 在处理特定的IE浏览器布局问题时仍然具有重要作用。 `zoom` 的基本用法是将一个...
其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。 Zoom的使用方法： ...
在CSS中，`zoom:1`是一个非常实用的技巧，尤其在处理老版本的Internet Explorer（如IE6、IE7、IE8）时。这个属性在这些浏览器中能够触发一个叫做“hasLayout”的机制，从而解决一系列布局和渲染问题。以下是对`zoom:...
主要为大家介绍了CSS中zoom属性或overflow:auto属性清除浮动的作用,文中通过实例代码介绍的很详细，相信会对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴，下面跟着小编一起来学习学习吧。
这部分代码可能包括对触摸事件的监听、计算缩放比例、更新图片的 CSS transform 属性以及处理边界限制，确保图片在放大或缩小后仍能在预览区域内正常显示。同时，它也可能包含平移功能，让用户能在放大后的图片中...
在现代网页设计中，自适应图片的实现主要依赖于CSS中的`max-width`属性和`height:auto`组合使用。`max-width`属性用于限制图片的最大宽度，当图片的原始宽度超过设定的`max-width`值时，图片将被缩放至指定的最大...
在图片缩放中，可以使用CSS的`transform`属性来改变元素的大小。例如，`transform: scale(x)`可以用来缩放元素，其中`x`是一个介于0和1之间的值，表示相对于原尺寸的缩放比例。如果希望在鼠标悬停时实现图片放大效果...
首先，你需要在项目中引入jQuery库，然后下载Cloud Zoom的压缩包，解压后将`cloud-zoom.1.0.2.js`和对应的CSS文件（通常为`cloud-zoom.css`）添加到你的网页中。最后，通过JavaScript代码或HTML数据属性应用插件到...
CSS 透明度属性是网页设计中用于控制元素可见度的重要工具，它允许元素呈现出不同程度的透明，从而实现渐变效果或者让背景元素透过前景元素显示出来。本文将深入探讨CSS透明度属性及其在不同浏览器中的兼容性问题。 ...
Cloud-Zoom的使用相当简单，只需要在HTML中添加对应的元素和属性，并引入相应的JavaScript和CSS文件即可。同时，该插件支持多种浏览器，包括IE8及以上版本和其他现代浏览器，兼容性良好。此外，它还提供了丰富的配置...
6. **图像处理**: CSS2.0允许对图像进行裁剪（`clip`）、缩放（`zoom`）和定位，以及使用`background-image`实现平铺和拉伸效果。 7. **边框和边框圆角**: 边框样式可以是实线、虚线、点线等，边框宽度和颜色可...
在CSS中，我们可以使用`opacity`属性来创建一个元素的半透明效果。`opacity`属性接受一个0到1之间的数值，其中0表示完全透明，1表示完全不透明。但是，当为整个元素设置`opacity`时，该元素及其所有子元素都会受到此...
这通常涉及到计算缩放比例，并相应地调整图片的CSS transform属性。 4. 平移处理：在缩放后，用户可能需要平移图片以查看不同区域。这需要监听触摸或鼠标事件，计算偏移量并更新图片的位置。 5. 优化性能：为了...