<!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>

滚轮事件js的更多相关文章

  1. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  2. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

  3. JS滚轮事件(mousewheel/DOMMouseScroll)了解

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  4. js 滚轮事件 滚轮焦点图（轮播图）

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  5. js整频滚动展示效果（函数节流鼠标滚轮事件）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  7. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  8. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  9. js鼠标滚轮事件

    不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...

随机推荐

  1. 后缀数组 POJ 2406 Power Strings

    题目链接 题意:连续重复子串.给定一个字符串 L,已知这个字符串是由某个字符串 S 重复 R 次而得到的(L = S^R ), 求 R 的最大值. 分析:枚举长度,判断条件是能被总长度整除且LCP ( ...

  2. Sqlserver自定义函数Function

    一.FUNCTION: 在sqlserver2008中有3中自定义函数:标量函数/内联表值函数/多语句表值函数,首先总结下他们语法的异同点: 同点:1.创建定义是一样的:                ...

  3. POJ 1014 Dividing（多重背包）

    Dividing   Description Marsha and Bill own a collection of marbles. They want to split the collectio ...

  4. BZOJ1841 : 蚂蚁搬家

    树分治,对于每个分治结构,维护两棵线段树. 第一棵按dfs序维护所有点到重心的距离,第二棵维护每个分支的最长链. 那么当前结构对答案的贡献就是第二棵线段树的最大值$+$次大值. 对于操作$0$,如果是 ...

  5. 洛谷 P2661 信息传递 Label:并查集||强联通分量

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  6. 【BZOJ】3529: [Sdoi2014]数表

    题意:求 $$\sum_{i=1}^{n} \sum_{j=1}^{m} \sum_{d|(i, j)} d 且 (\sum_{d|(i, j)} d)<=a$$ n, m<=1e5,q次 ...

  7. 在docker 中搭建gitlab环境

    docker run --name gitlab -it -p : -p : -p : \ --env 'GITLAB_SECRETS_DB_KEY_BASE=Rpwq35wjLJ5N6CrkvdXs ...

  8. xargs

    xargs的作用一般等同于大多数Unix shell中的反引号,但更加灵活易用,并可以正确处理输入中有空格等特殊字符的情况.对于经常产生大量输出的命令如find.locate和grep来说非常有用.

  9. C#常用方法二

    public sealed class StringTool { /// <summary> /// 将txt文件读入字符串 /// </summary> /// <pa ...

  10. JSch - Java实现的SFTP（文件上传详解篇）

    JSch是Java Secure Channel的缩写.JSch是一个SSH2的纯Java实现.它允许你连接到一个SSH服务器,并且可以使用端口转发,X11转发,文件传输等,当然你也可以集成它的功能到 ...