`

js 滚轮事件

 
阅读更多 

<html>
<head>

  <title>Mouse Wheel Data</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  <style>
      .slider {
          width: 50px;
          height: 180px;
          background: #eee;
          padding: 10px 0;
          cursor: n-resize;
      }

      .slider-slot {
          width: 16px;
          margin: 0 auto;
          height: 180px;
          background: #eee;
          border: 1px solid gray;
          border-color: #999 white white #999;
          position: relative;
      }

      .slider-trigger {
          width: 14px;
          height: 18px;
          font: 1px/0 arial;
          border: 1px solid gray;
          border-color: white #999 #999 white;
          background: #ccc;
          position: absolute;
      }

      .slider-trigger b {
          display: block;
          margin: 1px 3px;
          border-top: 1px solid #999;
          border-bottom: 1px solid white;
      }
  </style>
</head>
<body>
<h2>文本框增加/减少值</h2>

<div><input type="text" id="txt" value="100"/><span id="warn">文本框获得焦点后滚动鼠标滚轮</span></div>
<h2>鼠标滚动缩放图片</h2>

<div>
  <img src="/upload/201005/20100531231516458.jpg" id="img" width="300" style="cursor:-moz-zoom-in" title="鼠标滚动 缩放大小" /
  alt="" />
</div>
<h2>鼠标滚动控制滑块移动</h2>

<div class="slider" id="slider">
  <div class="slider-slot">
    <div class="slider-trigger" id="sliderTrigger">
      <strong></strong>
      <strong></strong>
      <strong></strong>
      <strong></strong>
      <strong></strong>
    </div>
  </div>
</div>
</body>

<script>
    var $ = function (i) {
        return document.getElementById(i);
    }

    //取得滚动值
    function getWheelValue(e) {
        e = e || event;
        return ( e.wheelDelta ? e.wheelDelta / 120 : -( e.detail % 3 == 0 ? e.detail / 3 : e.detail ) );
    }


    function stopEvent(e) {
        e = e || event;
        if (e.preventDefault) e.preventDefault();
        e.returnValue = false;
    }

    //绑定事件,这里对mousewheel做了判断,注册时统一使用mousewheel
    function addEvent(obj, type, fn) {
        var isFirefox = typeof document.body.style.MozUserSelect != 'undefined';
        if (obj.addEventListener)
            obj.addEventListener(isFirefox ? 'DOMMouseScroll' : type, fn, false);
        else
            obj.attachEvent('on' + type, fn);
        return fn;
    }

    //移除事件,这里对mousewheel做了兼容,移除时统一使用mousewheel
    function delEvent(obj, type, fn) {
        var isFirefox = typeof document.body.style.MozUserSelect != 'undefined';
        if (obj.removeEventListener)
            obj.removeEventListener(isFirefox ? 'DOMMouseScroll' : type, fn, false);
        else
            obj.detachEvent('on' + type, fn);
    }

    /*限制范围函数,
     参数是三个数字,如果num 大于 max, 则返回max， 如果小于min，则返回min,如果在max和min之间，则返回num
     */
    function range(num, max, min) {
        return Math.min(max, Math.max(num, min));
    }

    /* ------------ */
    /* <h2>文本框增加/减少值</h2> */

    $('txt').onfocus = function () {
        //保存txt自己的引用
        var me = this,
        //onfocus之后注册滚轮事件
                handler = addEvent(me, 'mousewheel', function (e) {
                    stopEvent(e);
                    var delta = getWheelValue(e);
                    /*
                     +me.value 将me.value转换成数字，
                     然后使用isNaN检查转换后的数字是否为NaN
                     如果是，重新赋值me.value=0;
                     */
                    if (isNaN(+me.value)) me.value = 0;
                    //递增（或递减）
                    me.value = +me.value + delta;
                    //选中me里的文字
                    me.select();
                });

        //失去焦点时，把mousewheel事件移除，重置window.onblur和handler引用为null
        this.onblur = function () {
            //移除掉mousewheel事件
            delEvent(me, 'mousewheel', handler);
            window.onblur = handler = null;
        }

        //为了防止浏览器失焦后，文本框重复触发focus，在onblur时，让文本框同时失焦
        window.onblur = function () {
            me.blur();
            //把自己清理掉
            this.onblur = null;
        }
    }
    /* <h2>鼠标滚动缩放图片</h2> */
    addEvent($('img'), 'mousewheel', function (e) {
        stopEvent(e);
        var delta = getWheelValue(e);
        //每次递增（或递减）10px，使用了范围限制，保证图片不会过大过小
        var img = $('img'); //没有修复ie的this指向，所以这里只好重新获取img
        img.style.width = range(img.offsetWidth + ( delta * 10 ), 550, 100) + 'px';
        return false;
    });
    /* <h2>鼠标滚动控制滑块移动</h2> */
    addEvent($('slider'), 'mousewheel', function (e) {
        stopEvent(e);
        var delta = getWheelValue(e),
                tar = $('sliderTrigger');
        //杯具的反转，因为tar.offsetTop 越大，滑块就越往下，所以delta又需要反转回来，向上是负的，向下是正的，所以乘以-1
        tar.style.top = range(tar.offsetTop + ( -1 * delta * 10 ), 160, 0) + 'px';
    });
</script>
</html>
 
分享到：
| rails 校验
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics