CSS的zoom属性

一时失言乱红尘 2022-05-12 00:18 145阅读 0赞

**一 介绍**

zoom属性用于设置或检索对象的缩放比例。其对应的样式标签属性为zoom属性。

语法：

zoom : normal | number

normal：使用对象的实际尺寸。

number：百分数或者无符号浮点实数。无符号浮点实数值为1.0或百分数为100%时相当于此属性的normal值。

**二 应用**

通过鼠标滚轮放大缩小图片

本示例实现了使用鼠标滚轮放大缩小图片，当用户将鼠标移动到图片上时，图片将会检索焦点，然后用户可以滚动鼠标滚轮来改变图片的大小。

主要是通过Event对象的wheelDelta属性（用于检索鼠标的滑轮键的值）控制图片的放大或缩小的倍数，再根据检索的值改变图片的style对象的zoom属性来实现。

**三 代码**

<script language="javascript">
    function bigimg(i)
    //自定义滚动鼠标滚轮改变图片小大函数。
    {
    	var zoom = parseInt(i.style.zoom,10)||100;
    	zoom += event.wheelDelta / 12;
    	if(zoom > 0 )
    	i.style.zoom=zoom+'%';
    	return false;
    }
    </script>
    <body>
    <table width="100%">
     <tr>
     <td><span >请滚动鼠标滚轮</span></td>
     </tr>
    </table>
    <center>
    <img src="temp.jpg" width="461" height="277" border="1" onmousewheel="return bigimg(this)">
    </a>
    </center>
    </body>

**四 运行效果**

![95dab3d5-731c-3709-8b73-6e0f1dcddf03.png][]

[95dab3d5-731c-3709-8b73-6e0f1dcddf03.png]: /images/20220512/d1e302373d754e7eb4df17f0c82eac73.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 有关边框的属性_边框样式（CSS属性）

css 有关边框的属性句法 (Syntax) border-style 边框样式 : \{ \{ ： \{ \{ none | 无 | hidden | 隐藏 dot

落日映苍穹つ/ 2022年12月03日 11:25/ 0 赞/ 220 阅读

相关 android zoom,Android ImageView Zoom-in and Zoom-Out

The other implementations here all have some kind of a flaw. so i basically mixed them u

左手的ㄟ右手/ 2022年10月05日 04:57/ 0 赞/ 114 阅读

相关 css3中的zoom属性以及jquery中css()方法操作元素的属性

css3中的zoom设置元素缩放比例; 例如ydi \{ width:300px; height:300px; zoom:5 \} 元素放大到五倍，再用jquer

深藏阁楼爱情的钟/ 2022年09月23日 03:47/ 0 赞/ 200 阅读

相关 css中zoom与transform:scale()的区别

zoom和transform:scale()都是放大元素用的， zoom:n会重新渲染元素，元素占据空间变大，页面重新布局。不过用jquery中的width()获取元素的宽度

我会带着你远行/ 2022年07月13日 03:00/ 0 赞/ 238 阅读

相关 css中zoom的作用

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，

布满荆棘的人生/ 2022年07月13日 02:09/ 0 赞/ 141 阅读

相关浅谈 css的zoom属性

zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。不过值得注意的一点就是火

不念不忘少年蓝@/ 2022年05月29日 12:56/ 0 赞/ 1262 阅读

相关 CSS的zoom属性

一介绍 zoom属性用于设置或检索对象的缩放比例。其对应的样式标签属性为zoom属性。语法： zoom : normal | number normal：使用对象

一时失言乱红尘/ 2022年05月12日 00:18/ 0 赞/ 146 阅读

相关 css属性

[关于table相关的属性，CSS样式][table_CSS] <table style="border:1px solid red" align="center"><

﹏ヽ暗。殇╰゛Y/ 2022年05月08日 13:33/ 0 赞/ 291 阅读

相关 zoom:1

[zoom:1的常见作用][zoom_1] zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。可以让网页

浅浅的花香味﹌/ 2021年10月09日 03:18/ 0 赞/ 226 阅读

相关 CSS的zoom属性使用以及其他浏览器不兼容问题

在开发过程中,由于整个页面设计完后效果偏大,于是百度了找到了CSS的相关属性 zoom属性 transform:scale() 这两个都可以使得整个页面进行缩小

客官°小女子只卖身不卖艺/ 2021年09月25日 05:24/ 0 赞/ 1083 阅读