用鼠标滚动缩放图片

用鼠标滚动缩放图片

使用Javascript中的onmusewheel事件来的。兼容firefox、chrome等主流浏览器。

function wheel(obj, fn, useCapture) {
        var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x  
        if (obj.attachEvent) //if IE (and Opera depending on user setting)  
            obj.attachEvent("on" + mousewheelevt, handler, useCapture);
        else if (obj.addEventListener) //WC3 browsers  
            obj.addEventListener(mousewheelevt, handler, useCapture);
          
        function handler(event) {
            var delta = 0;
            var event = window.event || event;
            var delta = event.detail ? -event.detail / 3 : event.wheelDelta / 120;
            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
            return fn.apply(obj, [event, delta]);
        }
    }
    var count = 10;
    var slide_zoom = document.getElementById("slide_zoom");
    function zoom(delta) {
        if (delta >= 1)
            Resize(++count);
        else if (delta <= -1)
            Resize(--count);
    }
    function Resize(c) {
        slide_zoom.style.width = (c + 100) + '%';
        slide_zoom.style.height = (c + 100) + '%';
       }
    wheel(slide_zoom, function (e, delta) { zoom(delta) }, false);