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