`

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 校验
评论
发表评论

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

相关推荐

    JS滚轮事件

    JS滚轮事件 JS滚轮事件是指在浏览器中滚动滚轮时触发的事件，以便实现滚动缩放、列表滚动、地图缩放等功能。滚轮事件可以极大地提高用户体验，但是不同的浏览器对滚轮事件的支持却不尽相同。 事件名称的不同 在...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    为了捕捉这一行为并根据需要做出响应，开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一...

    openlayers的鼠标滚轮事件

    在上述示例中，通过简单的HTML结构和JavaScript代码实现了对鼠标滚轮事件的控制。用户可以通过点击“开启滚轮缩放”和“关闭滚轮缩放”两个链接来动态地启用或禁用滚轮缩放功能。 ##### 4.1 HTML结构 HTML部分定义...

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能，它允许我们监听并响应用户使用鼠标滚轮时的操作，以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中，我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    JS滚轮事件onmousewheel使用介绍

    JavaScript滚轮事件，即onmousewheel事件，是一种在用户滚动鼠标滚轮时被触发的事件。通过此事件，开发者可以捕捉到滚轮滚动的细节，并根据需要执行相应的操作，例如调整网页中图片或文字的尺寸。 在讨论JS滚轮事件...

    jquery鼠标滚轮事件支持插件

    开发者只需在项目中引入插件的JavaScript文件，然后就可以通过jQuery选择器和事件绑定方法来监听和处理滚轮事件。 “jquery-mousewheel-master”是这个插件的源代码仓库，其中包含了插件的主文件和其他相关资源。...

    JQ鼠标滚轮事件

    其中，“JQ鼠标滚轮事件”是jQuery提供的一种方便的方式来监听和处理用户的鼠标滚轮动作。这个功能允许开发者在用户滚动鼠标滚轮时执行特定的代码，为网页添加更丰富的交互性。 首先，我们来理解一下鼠标滚轮事件的...

    javascript 鼠标滚轮事件

    在JavaScript中，可以通过几种方式来监听和处理鼠标滚轮事件。 在IE浏览器中，通常使用`onmousewheel`事件来监听鼠标滚轮的动作。该事件对象会有一个`detail`属性，表示鼠标滚轮滚动的“细节”量，其中正值表示向上...

    JavaScript 滚轮事件使用说明

    JavaScript 滚轮事件是网页开发中用于处理用户滚动鼠标滚轮时的一种交互方式，它可以帮助开发者实现诸如页面滚动、地图缩放等丰富的用户界面效果。在不同的浏览器中，滚轮事件的处理方式存在差异，这增加了跨浏览器...

    js滚轮事件兼容性问题需要注意哪些

    JavaScript滚轮事件在不同浏览器之间存在兼容性问题，需要开发者特别注意。本文将深入探讨这些问题，并提供相应的解决方案。 首先，我们需要了解不同浏览器对滚轮事件的支持情况。在IE和Chrome中，滚轮事件通常通过...

    js滚轮事件 自定义滚动条的实现

    总结来说，自定义滚动条的实现主要涉及JavaScript的事件监听和DOM操作，以及CSS的样式设计。通过这种方式，我们可以创建一个与网页内容紧密结合且视觉效果独特的滚动条，提升用户体验。在实际项目中，还可以进一步...

    javascript滚轮事件基础实例讲解（37）

    JavaScript滚轮事件是网页开发中常见的一种交互方式，它允许用户通过鼠标滚轮与网页元素进行交互，例如滚动页面或改变元素的某些属性。在本文中，我们将深入探讨JavaScript滚轮事件的基础实例，并理解如何使用它来...

    两种js监听滚轮事件的实现方法

    本文将详细介绍两种JavaScript监听滚轮事件的实现方法：原生JavaScript和jQuery。 首先，我们来看第一种方法，使用原生JavaScript的`window.onscroll`事件监听器： ```javascript window.onscroll = function() { ...

    js中鼠标滚轮事件详解(firefox多浏览器)

    在JavaScript中，处理鼠标滚轮事件是一项常见的任务，尤其在创建交互式网页时。滚轮事件允许我们响应用户通过鼠标滚轮进行的上下滚动操作。然而，不同浏览器对滚轮事件的支持和处理方式有所不同，这需要开发者进行...

    javascript实现禁止鼠标滚轮事件

    在这篇文章中，主要介绍了使用JavaScript禁止鼠标滚轮事件的技术细节，对于前端开发者来说，这是一个相当实用的技巧，尤其是在需要定制化页面交互行为时。下面将详细解释文章中的核心知识点。 首先，文章提到，在...

    js实现鼠标滚轮控制图片缩放效果的方法

    该事件是旧版的IE浏览器引入的，而标准的DOM事件应当使用addEventListener来绑定滚轮事件，即使用wheel事件，但为了兼容性考虑，很多情况下仍然会使用onmousewheel事件。 在上述代码示例中，通过定义一个JavaScript...

    Silverlight 鼠标滚轮事件

    在Microsoft Silverlight中，鼠标滚轮事件是开发者与用户交互的重要组成部分，特别是在创建富互联网应用程序（RIA）时。本文将深入探讨Silverlight中的鼠标滚轮事件及其应用。 首先，了解Silverlight的基础。...

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