滚轮事件js

<!DOCTYPE html>

<html>

<head>

  <title>jane</title>

  <style>div.enclosure{border:solid black 10px;margin:10px;}</style>

</head>

<body>

    <div><img id="content" src="test.jpg" /></div>

  <script type="text/javascript">

var whenReady = (function(){

    var funcs = [];

    var ready = false;

    function handler(e){

        if(ready){

          return;

        }

        if(e.type === "readystatechange" && document.readyState !== "complete"){

          return;

        }

        for(var i = 0; i < funcs.length;i++){

          funcs[i].call(document);      

        }

        ready = true;

        funcs = null;

    }

    if(document.addEventListener){

          document.addEventListener("DOMContentLoaded",handler,false);  //firefox 专有

          document.addEventListener("readystatechange",handler,false);

          window.addEventListener("load",handler,false);

    }

    else if(document.attachEvent){

          document.attachEvent("onreadystatechange",handler);

          window.attachEvent("onload",handler);

    }

    return function whenReady(f){

      if(ready) f.call(document);

      else funcs.push(f);

    }

}());

// 查询窗口滚动条的位置

function getScrollOffset(w){

    w = w || window;

    // 除IE8及以前版本不能用

    if(w.pageXoffset != null) return{x:w.pageXoffset,y:pageYoffset};

    // 对标准模式下的IE（或者任何浏览器）

    var d = w.document;

    if(document.cmpatMode == "CSS1Compat"){

        

         return{x:d.body.scrollLeft,y:d.body.scrllTop};

    }

        

    // 对怪异模式下的浏览器

    else{

       return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};

    }

        

}

function enclose(content,framewidth,frameheight,contentX,contentY){

    framewidth = Math.max(framewidth,50);

    frameheight = Math.max(frameheight,50);

    contentX = Math.min(contentX,0) || 0;

    contentY = Math.min(contentY,0) || 0;

    var frame = document.createElement("div");

    frame.className = "enclosure";

    frame.style.width = framewidth + "px";

    frame.style.height = frameheight + "px";

    frame.style.overflow = "hidden";

    frame.style.boxSizing = "border-box";

    frame.style.webkitBoxSizing = "border-box";

    frame.style.MozBoxSizing = "border-box";

    content.parentNode.insertBefore(frame,content);

    frame.appendChild(content);

    content.style.position = "relative";

    content.style.left = contentX + "px";

    content.style.top = contentY + "px";

    var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 || navigator.userAgent.indexOf("WebKit") !== -1);

    var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1);

   

frame.onwheel = wheelHandler;    //未来浏览器

    frame.onmousewheel = wheelHandler;  // 大多数当前浏览器

    if(isFirefox){

        frame.addEventListener("DOMMouseScroll",wheelHandler,false);        

    }

    function wheelHandler(event){

        var e = event || window.event;

        var deltaX = e.deltaX * -30 ||    //wheel事件

                  e.wheelDeltaX / 4 ||      // mousewheel 

                                  0;        // 属性未定义

        var deltaY = e.deltaY * -30 ||       // wheel事件  

                  e.wheelDeltaY / 4 ||       // webkit中的mousewheel

    (e.wheelDeltaY === undefined &&          // 若没有2D的，就用1D滚轮属性

                  e.wheelDelta / 4) ||

                     e.detail * -10 ||            // DOMMouseScroll

                                  0;

        if(isMacWebkit){    //Mac苹果系统反应灵敏。chrome也是比较灵敏

            deltaX /= 30;

            deltaY /= 30;

        }

        if(isFirefox && e.type !== "DOMMouseScroll"){

            frame.removeEventListener("DOMMouseScroll",wheelHandler,false);

        }

        var contentbox = content.getBoundingClientRect();

        var contentwidth = contentbox.right - contentbox.left;

        var contentheight = contentbox.bottom - contentbox.top;

        if(e.altKey){

            if(deltaX){

                framewidth -= deltaX;

                framewidth = Math.min(framewidth,contentwidth);

                framewidth = Math.max(framewidth,50);

                frame.style.width = framewidth + "px";

            }

            if(deltaY){

                frameheight -= deltaY;

                frameheight = Math.min(frameheight,contentwidth);

                frameheight = Math.max(frameheight,50);

                frame.style.height = frameheight + "px";

            }

        }else{

            if(deltaX){

                var minoffset = Math.min(framewidth - contentwidth,0);

                contentX = Math.max(contentX + deltaX,minoffset);

                contentX = Math.min(contentX,0);

                content.style.left = contentX + "px";

            }

            if(deltaY){

                var minoffset = Math.min(frameheight - contentheight,0);

                contentY = Math.max(contentY + deltaY,minoffset);

                contentY = Math.min(contentY,0);

                content.style.top = contentY + "px";

            }

        }

        e.stopPropagation ? e.stopPropagation : e.cancelBubble = true;

        e.preventDefault ? e.preventDefault : e.returnValue = false;

        return false;

    }

}

whenReady(function(){

    enclose(document.getElementById("content"),500,500,-400,-200);

})

</script></body>

</html>