滚动鼠标滚轮缩放当前图片

在很多网站里我们常看到有些文章里的图片被鼠标覆盖，滚动鼠标滚轮的时候，覆盖的图片也相应的放大缩小了。这样很方便地放大图片，看到小图里一些细节。
这种效果如何实现？实例如下：

<script type=”text/javascript”>
function sfimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+’%';
return false;
}
</script>
<p><img onmousewheel=”sfimg(this)” src=”images/ceshiimg.jpg” /></p>

前面说到这样可以放大图片看细节，这是有前提的，原始图片必须要大，不然放大后，你看到的图片就模糊了，就失真了。但图片放很大，又不能在属性里限制死宽高，这时，我们需要在加载图片的时候固定图片的最大宽度。

<script type=”text/javascript”>
function resetimgsize(thispic)
{
if(thispic.width>500)
thispic.width=500;
}
</script>
<p><img onload=”resetimgsize(this)” src=”images/ceshiimg.jpg” /></p>

完整演示代码：

<script type=”text/javascript”>
function resetimgsize(thispic)
{
if(thispic.width>500)
thispic.width=500;
}
function sfimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+’%';
return false;
}
</script>
<p><img onload=”resetimgsize(this)”  onmousewheel=”sfimg(this)” src=”images/ceshiimg.jpg” /></p>