在jquery滑块的两侧设置margin-left缓冲区

Question

我正在使用jquery滑块，而我的滑块手柄很大。 为了使其成为我想要的方式，它必须有margin-left: -2px当它为0时（一直向左））和有margin-left: -32px当它为100时（一直到）对）。

我想放宽到正确的边距，而不要过分设置。 可以使用slide事件来完成，但是我在计算时遇到了一些麻烦：

$(...).slider({
     slide: function(event, ui){
         var newMarginLeft = ...calculation... (ui.value is 0-100)
         $(this).children(".ui-handle").css("marginLeft", newMarginLeft);
     }
});

Answer 1

您可以使用此函数，它将平均生成2到32之间的数字：

function generateNum(num)
{
    return 2 + Math.floor(num * .30);
}

比起，您只需在上面添加一个底片即可。 像这样使用：

$(...).slider({
     slide: function(event, ui){
         var newMarginLeft = "-" + generateNum(ui.value);
         $(this).children(".ui-handle").css("marginLeft", newMarginLeft + "px");
     }
})

jsFiddle在这里： http : //jsfiddle.net/RWuR4/1/

您还可以尝试使用Math.round进行四舍五入：这是一个使用Math.round的小提琴，它使99也返回32（因此可能比您想要的要多一些而不是Math.floor）：

http://jsfiddle.net/RWuR4/2/