你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题的代码改进.
这是我可怕的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
因为您只使用value属性,所以我只传递参数对象,只有这个属性.如果您还需要更多功能,请记住将其添加到鼠标滚轮代码中.
EDIT3：当幻灯片功能返回false时添加了更改取消功能(就像在文档中一样)
更新：delta不仅显示车轮方向,还具有更深的含义.它描述了要滚动的像素数.滚动的默认设置是3行,即120像素,但它可以不同.
如果您只想检索车轮方向,请更改：
value -= delta / 8;
对此：
value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;
虽然delta === 0应该永远不会发生.
更新：为更新版本的jQuery(e.originalEvent)添加了部分.
原文链接：https://www.f2er.com/jquery/428384.html