鼠标滚轮缩放图片-优快云博客

一介绍

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>

四运行效果