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>
 
四 运行效果


 

猜你喜欢

转载自cakin24.iteye.com/blog/2360810
今日推荐