jquery 鼠标滚轮事件插件 Mousewheel

时间：2014-08-15 12:04:38 阅读：297 评论：0 收藏：0 [点我收藏+]

标签：style blog http color java 使用 io strong

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

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

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。

JavaScript Code复制内容到剪贴板

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

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

以下是示例的源代码：

JavaScript Code复制内容到剪贴板

jQuery(function($) {
$(‘div.mousewheel_example‘)
.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;
});
});

jquery的鼠标滚轮插件 Mousewheel下载

从GitHub下载其他版本。

使用

要使用这个功能，只需对目标元素的’mousewheel’事件绑定事件处理函数即可。

Mousewheel插件还提供了两个事件函数：mousewheel和unmousewheel，可以对目标元素调用这两个函数，并在参数中指定回调函数。

事件的回调函数第一个参数为event，第二个参数为delta，代表鼠标滚轮的变化值。

以下是上面两种使用方式的示例：

JavaScript Code复制内容到剪贴板

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

在发生滚轮滚动事件时，如果要设置屏幕滚动高度，就应该使用animate运动设置 scrollTop 来做。直接设置 window 的scrollTop不能达到效果。总会会出多点来。

$(window).on(‘mousewheel‘, function(event, delta) {  
        //var direction = delta > 0 ? ‘Up‘ : ‘Down‘;
        var step = $(window).height();            //可视区高度
        var cur_top = $(window).scrollTop();    //当前滚过的高度
        var direction = delta > 0 ? -1 : 1;
        var height = direction * step + cur_top;
        var x_height = Math.floor(height/step)*step;    //滚过整数倍的可视区大小
        
        $("html, body").stop().animate({ scrollTop: x_height }, 400);    

        return false;  
    });

jquery 鼠标滚轮事件插件 Mousewheel,布布扣,bubuko.com

jquery 鼠标滚轮事件插件 Mousewheel

标签：style blog http color java 使用 io strong

原文地址：http://www.cnblogs.com/lxpursue/p/3914230.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

jquery 鼠标滚轮事件 插件 Mousewheel

jquery 鼠标滚轮事件插件 Mousewheel