CSS的zoom属性

一介绍

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>

四运行效果

大小: 62.6 KB

查看图片附件

CSS的zoom属性相关推荐

css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言其实在CSS中的 ...
浅谈 css的zoom属性
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属 ...
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
CSS的zoom属性使用以及其他浏览器不兼容问题
在开发过程中,由于整个页面设计完后效果偏大,于是百度了找到了CSS的相关属性 zoom属性 transform:scale() 这两个都可以使得整个页面进行缩小但是使用transform:scale ...
FireFox火狐浏览器不支持CSS中zoom属性的解决办法
首先需要明确一点的是,火狐浏览器全系列不支持CSS的zoom缩放属性. 浏览器兼容查询网站:https://caniuse.com/ 所以此时只能通过transform的scale实现放缩代码很简单 ...
css 缩放zoom属性
zoom属性用于设置或检索对象的缩放比例语法: zoom : normal | number normal:使用对象的实际尺寸. number:百分数或者无符号浮点实数.无符号浮点实数值为1.0或百 ...
自定义checkbox大小（注：用CSS的ZOOM属性）
<input type="radio" name="radiobutton" value="radiobutton" style=&q ...
CSS Zoom属性
CSS中 Zoom属性介绍其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性 ...

CSS的zoom属性

CSS的zoom属性相关推荐

最新文章

热门文章