Mouse Wheel Data .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; } 文本框增加/减少值 文本框获得焦点后滚动鼠标滚轮 鼠标滚动缩放图片 鼠标滚动控制滑块移动 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]先来看看各个浏览器的兼容情况 IE 6,7,8 注册事件使用 onmousewheel 取得滚动的值使用 event.wheelDelta 滚动步长 120 向下是负值，向上是正值 当鼠标在一个同一个坐标，并且滚轮不间断滚动时，wheelDelta会按步长递增 （比如 -240 -360 ） Firefox 3.5 注册事件有两个MozMousePixelScroll,DOMMouseScroll,但是它们不能使用element.onDOMMouseScroll方式注册，必须使用addEventLinstener来监听事件 Firefox没有event.wheelDelta,它使用event.detail 来获取滚动的信息(Firefox这点做的很奇怪) event.detail 本身是用来记录一个事件在原地(鼠标坐标不发生变化的情况下)执行了多少次的信息 而在DOMMouseScroll事件发生的时候，它的值通常是 3 和 -3 但是它的取值和IE正好相反, 向上是负,向下是正( 这个问题在代码中需要做统一 ) 为什么说它的值通常是 3和-3呢，因为当你按住ctrl ,alt, shift 之后，再滑动鼠标滚轮，detail 的值就会成为 1和-1 而按住别的键，则正值有时还会变成6 总之在我看来是有点乱糟糟， MozMousePixelScroll 据Mozilla说，是几乎跟DOMMouseScroll一样的事件，只不过更精确（到像素） 但是这个事件的detail值返回的非常奇怪，默认是51和-51,按住ctrl ,alt, shift 变成了 +- 17. @_@，所以它被华丽的无视了，我们不打算使用它 Chrome 和IE保持一致，但是它考虑到了横向鼠标滚轮设备的情况，所以增加了两个鼠标来分别获取值 事件 onmousewheel wheelDelta {number} wheelDeltaX {number} wheelDeltaY {number} 这次 Opera 又是集大成者，既有detail 取值也一样是3,-3,又有wheelDelta,不过表现上倒是很一致 事件 onmousewheel detail = {number} wheelDelta = {number} 本来我们应该从Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，选择一个，然后把另一个通过计算做成统一的， 但是实际上我们只能通过这些值知道 是向上滚 还是向下滚， 所以为了方便，我们两个都不取，通过计算把他们统一成 +1 和 -1.(这样做也是为了实际应用中的运算方便); 对于IE,Chrome来说，直接除以120就可以搞定 Opera 同时支持wheelDelta和detail ,但是detail没有wheelDelta同一位置递增的能力，所以 我们首先优先判断wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail 由于firefox的键盘干扰，我们还需要对detail做一些过滤 首先用这个值跟3做取模运算 value % 3 说它是3的倍数，那么返回值是0，我们就用value除以3后返回( 保证返回的值是+1 -1 ) 如果返回值不是0，那说明这个值不是1就是-1，那就直接返回这个值 最后，由于Firefox返回值的规则是向上是负 向下是正，与平时的习惯不同，我们要将正负反转过来，方法也很简单，计算结果前面加一个负号就可以搞定 话说回来，对滚轮事件的支持情况firefox真是有点闷. 好了，分析了一大堆，其实代码就几句: 复制代码 代码如下: function getWheelValue( e ) { e = e||event; return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) ); } 最后说说未来的滚轮事件和API 在DOM3 Event 中 滚轮事件变得更为复杂（也支持更多的东西） 注册的事件并没有变，依然叫mousewheel 专门增加了两枚滚轮事件对象 MouseWheelEvent WheelEvents 而且支持了x,y,z三个轴向的滚轮值( 真复杂>_< ) 感兴趣可以瞧瞧这里 http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents

　　推荐阅读

　　jquery 简单的title显示插件

学到插件 自己也倒弄出来一个。 效果图如下： 代码如下： 无标题页 #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;} 你好>>>详细阅读

本文标题：js 事件对象 鼠标滚轮效果演示说明

地址：http://www.17bianji.com/kaifa2/JS/26297.html

 1/2    1