鼠标滚动事件

最新推荐文章于 2023-02-06 14:41:07 发布

sinat_23678421

最新推荐文章于 2023-02-06 14:41:07 发布

阅读量445

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_23678421/article/details/41380993

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        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.οnwheel=wheelHandler;
            frame.onmousewheel=wheelHandler;
            if(isFirefox) frame.addEventListener("DOMMouseScroll",wheelHandler,false);

function wheelHandler(event){
var e=event || window.event;

var deltaX= e.deltaX * -30 || e.wheelDeltaX /4 || 0;
var deltaY= e.deltaY * -30 || e.wheelDeltaY/4 || (e.wheelDeltaY===undefined && e.wheelDelta/4) || e.detail * -10 || 0;

                if(isMacWebkit){
                    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(deltaY){
                        frameheight -= deltaY;
                        frameheight=Math.min(frameheight,200);
                        frameheight=Math.max(frameheight,50);
                        frame.style.height=frameheight+"px";
                    }
                }else{

                    /*
                    if(deltaX){
                        var minoffset=Math.min(frameheight-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=contentY-deltaY;
                        contentY=Math.min(contentY,0);
                        contentY=Math.max(contentY,-300);

                        content.style.top=contentY+"px";
                    }
                }
                if(e.preventDefault) e.preventDefault();
                if(e.stopPropagation) e.stopPropagation();
                e.cancelBubble=true;
                e.returnValue=false;
                return false;

}

        }
        function execit(){
            enclose(document.getElementById("content"),400,200,-200,-300)
        }
    </script>
    <style>
        div.enclosure{border:solid 1px black 10px;margin:10px;background-color:orange;}
    </style>
</head>
<body οnlοad="execit();">
<div style="height:100px"></div>
<img id="content" src="testimage.jpg" />
</body>
</html>