html鼠标滚轮监听,jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）...

1，插件介绍

jquery.mousewheel.js是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery插件。

2，使用说明

(1)使用该插件，只需将 mousewheel事件绑定到一个元素上即可。当然也可以使用类似 jQuery中其他的事件方法写法。下面列出这两种方式：

// 方式1：using on

$('#my_elem').on('mousewheel', function(event) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

});

// 方式2：using the event helper

$('#my_elem').mousewheel(function(event) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

});

(2)事件对象中可以获取如下三个属性值：

deltaX：值为负的(-1)，则表示滚轮向左滚动。值为正的(1)，则表示滚轮向右滚动。

deltaY：值为负的(-1)，则表示滚轮向下滚动。值为正的(1)，则表示滚轮向上滚动。

deltaFactor：增量因子。通过 deltaFactor * deltaX 或者deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

(3)如果想要对整个窗口进行滚轮事件监听，可以将监听添加在 window上。

$(window).mousewheel(function(event) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

});

3，使用样例

(1)效果图

黄色的 div方块使用绝对定位放置在页面中。

当我们鼠标移动到方块上时，通过上下滚动滚轮可以控制方块上下移动。而左右滚动滚轮可以控制方块的左右移动。

(2)样例代码

hangge.com

#cube {

width: 150px;

height: 150px;

position: absolute;

top: 10px;

left: 65px;

background: yellow;

opacity: 0.5;

}

$(function() {

//使用on监听滚轮事件

$('#cube').on('mousewheel', function(event) {

//输出滚轮事件响应结果

console.log(event.deltaX, event.deltaY, event.deltaFactor);

//上下滚动时让鼠标垂直移动

var newTop = $(this).position().top - event.deltaY + "px";

$(this).css("top", newTop);

//左右滚动时让鼠标水平移动

var newLeft = $(this).position().left + event.deltaX + "px";

$(this).css("left", newLeft);

});

});