<!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. 关于__IPHONE_OS_VERSION_MAX_ALLOWED和__IPHONE_OS_VERSION_MIN_ALLOWED的用法

    简单来说, 这些编译期常量, 对运行时的环境判断完全无效, 它告诉编译器用哪一段代码来进行编译, 那那段代码里, 你仍然可以写运行到目标机器里会崩溃的代码, 从stackoverflow里拷两段示例代 ...

  2. address元素

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

  3. storm源码之storm代码结构【译】【转】

    [原]storm源码之storm代码结构[译]  说明:本文翻译自Storm在GitHub上的官方Wiki中提供的Storm代码结构描述一节Structure of the codebase,希望对正 ...

  4. 新提交审核app保留检查更新入口将被拒绝（读取App Store 版本号的）

    3月起要求关闭所有App内的检查更新功能,苹果App Store将向用户自动提示更新,新版本提交审核版本如果保留检查更新入口,审核时,将被拒绝. 以上拒绝的方案: 读取App Store的版本号. 替 ...

  5. 【BZOJ】1132: [POI2008]Tro

    题意 给\(n(1 \le n \le 3000)\)个点,求所有三角形的面积和. 分析 首先枚举一个点,发现把其它点按照关于这个点的极角排序后第\(i\)个点关于前面\(1\)到\(i-1\)的点组 ...

  6. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  7. 【BZOJ1654】[Usaco2006 Jan]The Cow Prom 奶牛舞会 赤果果的tarjan

    Description The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in ...

  8. 【bzoj3160】万径人踪灭 FFT

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3160 我是一个傻叉 微笑脸 #include<bits/stdc++.h> #de ...

  9. C#_生成HTML

    #region 生成静态页 /// <summary> /// 生成静态页 /// </summary> /// <param name="URL"& ...

  10. ArcGIS 裁剪地图显示范围

    在argmap工具中,图层属性中,数据框选择“裁剪选项”,“指定范围”,根据一个要素的轮廓,即可以选择需要全屏显示的图层“要素的轮廓”,确定以后地图就自动居中显示,请注意要排除掉超出范围的图层,否则发 ...