最近项目中要有个鼠标在图片上滚动实现图片放大和缩小的得到功能,隐约的记得好像记得有个 mousewheel 事件,可以实现需求,于是乎,开始在网上查找这一方法,但是,出乎意料的结果,各浏览器对此方法有着不同的实现方式,当时我就呵呵啦...
这下麻烦啦,于是又在网上查了些许资料,基本上都是大同小异,大概的思路都是根据firefox的DOMMouseScroll事件 和 其它浏览器的onmousewheel事件来实现 自定义mousewheel事件,其实前辈们留下来的 基本上也可以拿来用啦,可是鬼使神差的不知怎么的这次就非要叫个针,非要自己实现一下试试,而且本人比较擅长 jquery, 所以有了想用 $.fn.extend 扩展一个 mousewheel事件的想法,所以就开启了下边的自定义 jquery 扩展 mousewheel事件之旅。

  其实呢,现在有个比较成熟的 jquery.mousewheel.js 插件,发现好多用到鼠标滚轮轮动效果的网站都用了这个插件,兼容性也挺高的,所以如果网站建设对加载文件数量不在意的话完全可以使用此插件:

  下载地址:

    https://github.com/jquery/jquery-mousewheel
    http://plugins.jquery.com/mousewheel/
    原谅我网速不好 以上两个地址 我都没访问到, 吼吼....

    http://www.jq22.com/jquery-info805(最后再此站点 下载了个应用 jquery.mousewheel.js 的 Demo,其中有 我们需要的插件哦:))

  细读了两边jquery.mousewheel.js源码,了解到,它是用 $.event.special 从 HTMLElement层级 进行的添加,可是这并不是我想要的,不能忘了自己最初的目的(我只是想要一个枣尝尝,并没有想要一颗枣树...)

  

好了不说了,开始正题,原谅我一说就容易刹不住车....

  首先,计划个思路,分个 1,2, 3,4..... 步..

  step1: 遍读网络博客了解各浏览器所支持的 鼠标滚动 事件,以便了解兼容性的不同

  涨姿势:

      主要区别在于 firefox 和 其它浏览器的区别:firefox支持DOMMouseScroll, 而 其它浏览器支持mousewheel。

      可是看了 jquery.mousewheel.js源码后,发现 貌似还有Browser 或是 同种Browser不同版本号, 支持的方式也是不一样,所以有又有了 wheel 和 MozMousePixelScroll(这个一看就是firefox支持的) 这两个事件,具体没有研究,如果对这方面有造诣的同仁们,欢迎留言,讨论交流。

  思路:

      1.把各浏览器对mousewheel支持的事件,组成数组,以便之后的事件监听

      2.将不同的mousewheel事件,进行事件监听(根据涨姿势 阶段了解到,主要是要处理firefox下的事件监听)

  所以有了下边的这段,参考 jquery.mousewheel.js 插件,并有些小改动的代码,如下:  

     $.fn.extend({
mousewheel: function(){
var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? //documentMode属性返回浏览器渲染当前文档所用的模式
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var el = this[0]; //this[0]; jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
if( el.addEventListener ){
for( var i = toBind.length; i; ){
el.addEventListener(toBind[--i],handleFun,false);
}
}
else {
el.onmousewheel = handleFun;
}
});

  

  step2: 对监听事件 中的事件处理函数进行设计,目的:得到 滚轮 的滑动方向(这点很重要哦,每一步都要明确知道我们要干什么)

  涨姿势:

      经过对defferent browers 测试,得到可以用来判断 滚轮滚动方向的属性,经测试 主要在 wheelDelta、wheelDeltaY 和 deltaY 三个属性上面有些文章(在step1阶段了解到还和detail属性有关,然而在自测阶段,发现 然并卵... detail=0 没有变过,可能是我用测浏览器版本问题,如果对这方面有造诣的同仁们,欢迎留言,讨论交流)。

      测试结果:

      

  思路:

      1.根据测试得到的结果,用滑动鼠标的滚轮以上各个属性的值的符号来确定 滚轮的滑动方向

     2.确定目标:向上滚动--> 1, 向下滚动--> -1

  思路已有,start coding.....

                 //deal with the mousewheel
function handleFun(e){
var driect = 0, delta=0; //driect:滚动方向 delta:各浏览器监听滚动事件的属性值
var e = e || window.event;
if ( e.wheelDelta ){ delta = e.wheelDelta }
else if ( e.deltaY ){ delta = e.deltaY * -1 }
else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
else {
console.log('get delta,have somethings wrong...');
}
delta==0 ? console.log('get delta,have somethings wrong...') :
delta>0 ? driect=1 : driect=-1; typeof fn==='function' ? fn( $(el) ,driect ) : '';
}

综合step1 和 step2, 完整写法:

         $.fn.extend({
mousewheel: function( fn ){
//judge the brower's mousewheel event, bind the event to element
var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var el = this[0]; //this[0]; jquery对象 转 JS对象(因addEventListener是JS对象的监听事件)
if( el.addEventListener ){
for( var i = toBind.length; i; ){
el.addEventListener(toBind[--i],handleFun,false);
}
}
else {
el.onmousewheel = handleFun;
} //deal with the mousewheel
function handleFun(e){
var driect = 0, delta=0; //driect:滚动方向 delta:各浏览器监听滚动事件的属性值
var e = e || window.event;
if ( e.wheelDelta ){ delta = e.wheelDelta }
else if ( e.deltaY ){ delta = e.deltaY * -1 }
else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
else {
console.log('get delta,have somethings wrong...');
}
delta==0 ? console.log('get delta,have somethings wrong...') :
delta>0 ? driect=1 : driect=-1; typeof fn==='function' ? fn( $(el) ,driect ) : '';
}
} });

应用:

 $('div').mousewheel(function(dir){
console.log( dir );
});

结果:

ok! 成功!! 至于开始提到的 滑动鼠标,图片的放大缩小功能实现在 《自定义mousewheel事件,实现图片放大缩小功能实现》中是讲述。

jquery扩展鼠标mousewheel事件的更多相关文章

  1. JQuery的鼠标滚动事件

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  2. 转载JQuery绑定鼠标粘贴事件工具类

    // 粘贴事件监控 $.fn.pasteEvents = function( delay ) { if (delay == undefined) delay = 10; return $(this). ...

  3. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

  4. jQuery之jQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

  5. JQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

  6. 前端之JQuery:JQuery扩展和事件

    jQuery之jQuery扩展和事件 一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[d ...

  7. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  8. jQuery禁用、开启鼠标滚轮事件

    1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

  9. jQuery学习-鼠标事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. [ppurl]从”皮皮书屋”下载电子书的姿势

    (欢迎转载,转载请注明出处:http://blog.csdn.net/hcbbt/article/details/42072545) 写在前面的扯皮 为什么标题的"皮皮书屋"加上了 ...

  2. 将Centos的yum源更换为国内的阿里云(163)源

    阿里云是最近新出的一个镜像源.得益于阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软 ...

  3. curl使用例子

    地址:http://phpbook.phpxy.com/34771 参考:http://php.net/manual/zh/function.curl-setopt.php 我们将curl的步骤分为以 ...

  4. MFC多国语言——资源副本

    此随笔主要参考了http://www.cnblogs.com/xianyunhe/archive/2011/09/02/2163842.html 为软件提供多国语言的支持的具体实现方法有很多,但基本原 ...

  5. linux 环境 tomcat 莫名奇妙挂掉

    ::-exec-] org.apache.coyote.http11.Http11Processor.service Error processing request java.lang.NullPo ...

  6. 56、LeakCanary——直白的展现Android中的内存泄露

    转载:http://blog.csdn.net/watermusicyes/article/details/46333925 DEMO下载地址:https://github.com/SOFTPOWER ...

  7. AndroidManifest.xml文件详解(activity)(三)四种工作模式

    android:launchMode 这个属性定义了应该如何启动Activity的一个指令.有四种工作模式会跟Intent对象中的Activity标记(FLAG_ACTIVITY_*常量)结合在一起用 ...

  8. XMLHttpRequest 对象 status 和statusText 属性对照表

    XMLHttpRequest 对象 status 和statusText 属性对照表 status statusText 说明 0** - 未被始化 1** - 请求收到,继续处理 100 Conti ...

  9. Oracle 数据库的组成(instance+database)

    Oracle服务器是一种对象关系数据库管理系统,它为信息管理提供开放.综合.集成的方法. Oracle服务器中有多种进进程.内存结构和文件: Oracle服务器由一个Oracle实例和一个Oracle ...

  10. Redis 教程

    http://www.runoob.com/redis/redis-tutorial.html Redis系列(一)--安装.helloworld以及读懂配置文件 再开个redis系列,本系列打算不详 ...