<!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. DHL 快递跟踪查询

      思路描述:主要使用正则表达式解析. 返回一个跟踪步骤列表. public class TrackingData     {         public string time { get; se ...

  2. applet示例 WelcomeApplet.java <Core Java>

    import java.awt.BorderLayout; import java.awt.EventQueue; import java.awt.Font; import java.awt.Grap ...

  3. 网站迁移时候，发现<head>内容都到body里了

    遇到的问题截图如下: 这个是编码问题,需要把所有涉及的文件保存成UTF-8 without BOM,手动的话可以用notepad++ 如果网站支持php,这边提供了一个php的脚本(clearBom. ...

  4. Codeforces Round #363 Div.2[111110]

    好久没做手生了,不然前四道都是能A的,当然,正常发挥也是菜. A:Launch of Collider 题意:20万个点排在一条直线上,其坐标均为偶数.从某一时刻开始向左或向右运动,速度为每秒1个单位 ...

  5. BZOJ3764 : Petya的序列

    首先如果一段连续子序列里没有任何幸运数,那么显然可以缩成一个点. 设幸运数个数为$m$,那么现在序列长度是$O(m)$的,考虑暴力枚举$R_1$,然后从右往左枚举$L_1$. 每次碰到一个幸运数,就将 ...

  6. Storm-166：Nimbus HA solution based on Zookeeper

    Nimbus HA feature is quite important for our application running on the storm cluster. So, we've bee ...

  7. Redis内存缓存系统入门

    网站:http://redis.io/ key-value cache and store    data structure server 1. 服务器端 1.1 安装 下载安装包:http://r ...

  8. ubuntu 安装 Terminator

    sudo apt-get install terminator Ctrl-Shift-E: 垂直分割Ctrl-Shift-O: 水平分割Ctrl-Shift-P: 激活先前的窗口Ctrl-Shift- ...

  9. [深入浅出WP8.1(Runtime)]文本块（TextBlock）

    4.3 文本块(TextBlock) 文本块(TextBlock)控件是用于显示少量文本的轻量控件,可以通过TextBlock呈现只读的文本,你可以把TextBlock控件理解为一种纯文本的展示控件. ...

  10. HTML-DOM零碎

    以下是取得集合,取得单个元素,取消红色"s" Document.getElementsByName("some") //IE无效Document.getElem ...