<!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. ol新属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ps让文字的颜色变成图片的颜色

    第一种: 把某张图片图层置于文字图层之上,右击图片图层-->选择"创建剪贴蒙版"即可.第二种:把某张图片图层置于文字图层之上,并选择图片图层,按住Ctrl键,点击文字图层,载 ...

  3. Squid的简单使用

    1. squid配置 # Squid normally listens to port http_port hosts_file /etc/hosts cache_access_log /var/lo ...

  4. XCOJ 1103 (LCA+树链最大子段和)

    题目链接: http://xcacm.hfut.edu.cn/problem.php?id=1103 题目大意:链更新.链查询,求树链的最大子段和.(子段可以为空) 解题思路: 将所有Query离线存 ...

  5. sqlite 数据类型 全面

    http://blog.csdn.net/jin868/article/details/5961263 一般数据采用的固定的静态数据类型,而SQLite采用的是动态数据类型,会根据存入值自动判断.SQ ...

  6. 显式Intent和隐式Intent

    http://blog.csdn.net/qs_csu/article/details/7995966 对于明确指出了目标组件名称的Intent,我们称之为“显式Intent”. 对于没有明确指出目标 ...

  7. ACM Haffman编码

    Haffman编码 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 哈弗曼编码大家一定很熟悉吧(不熟悉也没关系,自己查去...).现在给你一串字符以及它们所对应的权值 ...

  8. ACM 喷水装置（一）

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以 ...

  9. [题解+总结]NOIP2015模拟题2

    // 此博文为迁移而来,写于2015年7月22日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w72i.html 1.总 ...

  10. [知识点]网络流之Dinic算法

    // 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrg4.html      ...