鼠标滚轮事件----jquery-mousewheel

1.浏览器兼容性问题

Firefox 鼠标滚轮向上滚动是-3,向下滚动是3
IE 鼠标滚轮向上滚动是120,向下滚动是-120
Safari 鼠标滚轮向上滚动是360,向下滚动是-360
Opera 鼠标滚轮向上滚动是120,向下滚动是-120
Chrome 鼠标滚轮向上滚动是120,向下滚动是-120 


2.jquery-mousewheel

jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

使用mousewheel事件有以下两种方式:
  使用mousewheel和unmousewheel事件函数;
使用经典的bind和unbind函数。 
[javascript]  view plain copy
  1. $('div.mousewheel_example').mousewheel(fn);    
  2. $('div.mousewheel_example').bind('mousewheel', fn);    
mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event外,还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的,那么滚轮就是向下滚动,正的就是向上。
以下是示例的源代码:
[javascript]  view plain copy
  1. jQuery(function($) {    
  2.     $('div.mousewheel_example')    
  3.         .bind('mousewheel'function(event, delta) {    
  4.             var dir = delta > 0 ? 'Up' : 'Down',    
  5.                 vel = Math.abs(delta);    
  6.             $(this).text(dir + ' at a velocity of ' + vel);    
  7.             return false;    
  8.         });    
  9. });    

jquery的鼠标滚轮插件 Mousewheel下载

1.使用实例
          var divTwo = $('.divTwo');
            //1.禁用div的滚轮事件
            $('.divTwo').mousewheel(function (e) {
                return false;
            });
            //2.如果滚动条到底底部的时候 禁用window的滚轮滚动
            //3.判断滚动的方向
            divTwo.mousewheel(function (e, delta) {
                var decoration = delta > 0 ? 'Up' : 'down';
                $('.divFixed').text(decoration);

                var scrollTop = divTwo.scrollTop();
                var scrollHegiht = divTwo[0].scrollHeight;
                var height = divTwo.height();
                //滚动条 到底部且 滚轮向下滚动
                if (scrollTop + height >= scrollHegiht && delta < 0) {
                    e.preventDefault();
                }
                    //滚动条 到顶部 且滚轮向上
                else if (scrollTop == 0 && delta > 0) {
                    e.preventDefault();
                }
            });

            $(document).mousewheel(function (e, delta) {
                $('.divFixed').text(delta);
            });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值