<!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. "Accepted today?"[HDU1177]

    "Accepted today?" Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  2. BZOJ4116 : [Wf2015]Tours

    将边集划分成若干极大不相交集合,满足每个简单环都可以由某些集合相加得到,则答案就是这些集合大小的$\gcd$的约数. 对于一个简单环,上面的边一定不是桥边,而和它在一个集合的边肯定不在其他简单环上.因 ...

  3. Java NIO非阻塞理论学习

    Java NIO和阻塞IO的区别: 阻塞I/O在调用InputStream.read()方法时是阻塞的,它会一直等到数据到来时(或超时)才会返回:同样,在调用ServerSocket.accept() ...

  4. 创建第一个Hiberntae工程

    一.前言 很久之前已经对Hibernate有所了解,在项目中进行过简单的应用,基本了解hibernate的简单应用,没有深入的了解,来Shine公司快三个月了,公司的ORM框架就是用Hiberante ...

  5. 自定义Toast、程序退出时Toast也退出、Toast的用法

    http://blog.csdn.net/wangqilin8888/article/details/7464806 当我们在一个应用中用到Toaster来做为提示时,发现这样一个问题,当某个条件服合 ...

  6. chrome快捷键，让开发更快捷:

    9:18 2015/12/9chrome快捷键,让开发更快捷:部分:按住 Ctrl 键,然后点击链接 从后台在新标签页中打开链接,但您仍停留在当 前标签页中 按住 Ctrl+Shift 键,然后点击链 ...

  7. 【BZOJ1088】[SCOI2005]扫雷Mine 递推

    调LCT奔溃,刷水调节一下. #include <iostream> #include <cstdio> #include <cstring> using name ...

  8. 【BZOJ1051】1051: [HAOI2006]受欢迎的牛 tarjan求强连通分量+缩点

    Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...

  9. CentOS评估磁盘I/O性能读写极限测试

    用一个fio工具 安装 yum -y install fio 二,FIO用法: 随机读:fio  -direct=1 -iodepth 1 -thread -rw=randread -ioengine ...

  10. Linux文件锁flock

    Linux文件锁flock 在多个进程同时操作同一份文件的过程中,很容易导致文件中的数据混乱,需要锁操作来保证数据的完整性,这里介绍的针对文件的锁,称之为“文件锁”-flock. flock,建议性锁 ...