鼠标滚轮插件对于它的作用来说太重了。我提取了精华。在所有浏览器中都能很好地工作。
$('#bananas').bind('mousewheel DOMMouseScroll', function (e) {
var delta = 0, element = $(this), value, result, oe;
oe = e.originalEvent; // for jQuery >=1.7
value = element.slider('value');
if (oe.wheelDelta) {
delta = -oe.wheelDelta;
}
if (oe.detail) {
delta = oe.detail * 40;
}
value -= delta / 8;
if (value > 100) {
value = 100;
}
if (value < 0) {
value = 0;
}
result = element.slider('option', 'slide').call(element, e, { value: value });
if (result !== false) {
element.slider('value', value);
}
return false;
});
编辑:已更改#slider
to #bananas
EDIT2:添加触发slide
event
因为你只使用value
我为仅具有此属性的参数对象传递的属性。如果您需要更多内容,请记住将其添加到鼠标滚轮代码中。
EDIT3:添加更改取消能力slide
函数返回false
(就像文档中一样)
UPDATE: delta
不仅显示了车轮的方向,还有更深层次的含义。它描述了要滚动的像素数。滚动的默认设置为 3 行,即 120 像素,但也可以有所不同。
如果您只想检索车轮的方向,请更改此设置:
value -= delta / 8;
to this:
value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;
虽然delta === 0
永远不应该发生。
更新:为新版本的 jQuery 添加了部分(e.originalEvent)。