jQuery UI Slider – >鼠标滚轮支持？
你可能已经知道我是jQuery的新手，所以仍然非常允许不属于这个主题的代码改进。
这是我的HTML代码：
Bananas:
这是我可怕的js代码：
$( "#bananas" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 20, step: 5, slide: function( event, ui ) { $( "#bananas_amount_percent" ).val( ui.value + " %" ); // the code displays a percentage by standart, but I need the real value, too: var bananas_amount_percent = $( "#bananas_amount_percent" ).val(); var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); var bananas_amount = Math.round((weight / 100) * bananas_amount_percent); $( "#bananas_amount" ).val( bananas_amount + " g" ); } }); $( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" ); // again the real value (else the value would not be updatet on reload-reset) var bananas_amount_percent = $( "#bananas_amount_percent" ).val(); var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); var bananas_amount = Math.round((weight / 100) * bananas_amount_percent); $( "#bananas_amount" ).val( bananas_amount + " g" );
（重量是200）
然而，除了一个“小”细节之外，它正在工作：不是用鼠标滚轮！ 我已经发现我需要这个扩展名： https ： //github.com/brandonaaron/jquery-mousewheel/downloads
但我真的完全不知道如何将这个实现到我的Slider（我的网站上的5个btw）。
求助，谢谢！
鼠标滚轮插件太重了它的作用。 我提取了精华。 适用于所有浏览器。
$('#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更改为#bananas
EDIT2：添加了触发slide事件
因为您只使用value属性，所以我只为此属性传递参数对象。 如果您还需要更多function，请记住将其添加到鼠标滚轮代码中。
EDIT3：当slidefunction返回false时添加了更改取消function（就像在文档中一样）
更新： delta不仅显示车轮方向，还具有更深的含义。 它描述了要滚动的像素数。 滚动的默认设置是3行，即120像素，但它可以不同。
如果您只想检索车轮的方向，请更改：
value -= delta / 8;
对此：
value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;
虽然delta === 0应该永远不会发生。
更新：为更新版本的jQuery（e.originalEvent）添加了部分。
我之前没有使用过mousewheel插件，但从我看到它应该像这样使用：
$("#DivName").mousewheel(function(event, delta) { //Trigger slide event //Prevent the default mouse wheel event.preventDefault(); });
DivName可能是你的滑块，我相信Delta是滚动方向（以单位为单位）所以我认为负面是向上的，正向下。