您现于de位置乃:亚博 > 其他

亚博 2014-05-28 其他 35863

鼠标滚轮时间


鼠标滚轮事件


jquery插件默认乃不支持鼠标中轮滚轮事件de 现于我们可以用于添加跨浏览器de鼠标滚轮支持可以使用jquerydeMousewheel插件.


使用mousewheel事件有以下两种方式:

使用mousewheel和unmousewheel事件函数;

使用经典debind和unbind函数.

$('div.mousewheel_example').mousewheel(fn);  
$('div.mousewheel_example').bind('mousewheel', fn);



mousewheel事件de处理函数有1点小小de变化 它除了第1个参数event外 还接收到第2个参数delta.通过参数delta可以获取鼠标滚轮de方向和速度.如果deltade值乃负de 那么滚轮就乃向下滚动 正de就乃向上.

 

以下乃示例de源代码:

$('.scroller_wrap') .bind('mousewheel', function(event, delta) {  
    var dir = delta > 0 ? 'Up' : 'Down',  
    vel = Math.abs(delta);  
    $(this).text(dir + ' at a velocity of ' + vel);  
        return false;  
});


jqueryde鼠标滚轮插件 Mousewheel下载

从GitHub下载其他版本.

 

使用

要使用这个功能 只需对目标块素de’mousewheel’事件绑定事件处理函数即可.

 

Mousewheel插件还提供了两个事件函数:mousewheel和unmousewheel 可以对目标块素调用这两个函数 并于参数中指定回调函数.

 

事件de回调函数第1个参数为event 第2个参数为delta 代表鼠标滚轮de变化值.

 

以下乃上面两种使用方式de示例:


// 绑定方式  
$('#my_elem').bind('mousewheel', function(event, delta) {  
    console.log(delta);  
});  
  
// 事件函数方式  
$('#my_elem').mousewheel(function(event, delta) {  
    console.log(delta);  
});


评论