用鼠标滚动缩放图片

用鼠标滚动缩放图片

使用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);