鼠标滚动事件响应

对比一下，今天找到一个微软的例子，
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm，这个例子是关于鼠标滚动的事件，但是如果你要是滚动过了的话，那么会出现负值，滚动来滚动去的，用户却发现图片却没有放大缩小了，原来是因为微软程序里的一个Bug。先来分析分析微软的脚本：
var count = 10;

function Picture()
{
 count = Counting(count);
 Resize(count);
 return false;
}

function Counting(count){  
        if (event.wheelDelta >= 120)
                count++;
        else if (event.wheelDelta <= -120)
                count--;  
   return count;
}
function Resize(count){
   
       oImage.style.zoom = count + '0%';
    oCounter.innerText = count + '0%';   
}


图片加上滚动事件<img id="oImage" src="/workshop/graphics/sprinter.jpg" onmousewheel="return Picture();" >

先解释这个鼠标滚动事件：onmousewheel,这个事件鼠标一旦滚动，就会有个参数可以利用:
event.wheelDelta,这个值，一旦你往上滚动一次鼠标，他就是120，如果你要是往下滚动一次，那么它的值就是-120。还有一个跟放大缩小相关的style,就是zoom 属性，这个属性是一个百分数，表示放大缩小的倍数。但是，微软的这个示例却没有考虑到负数。
后来，我再另外找了一个示例，解决了这个问题，只要判断一下，如果要使count值小于0，那么就不给他变化。

function bbimg(o){
    alert(o.style.zoom);
 var zoom=parseInt(o.style.zoom, 10)||100;
 alert(event.wheelDelta);
 zoom+=event.wheelDelta/12;
if (zoom>0)
 o.style.zoom=zoom+'%';
 return false;
}
这样，就Ok了，这块代码，才是比较完善的，微软的这个示例显然会让很多用户感到莫名其妙。


修改一下，如果用户需要还原图片怎么办呢？其实看可以提供另外一块代码段：
function backthis()
{
    if(String(event.srcElement.tagName).toLowerCase()=='img'&&window.event.ctrlKey)
    {
        o.style.zoom = "100%";
    }
}

只要按住ctrl键，再移出图片，就可以把图片还原。