Question

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

我想要放松到正确的边距而不是将其设置为突然。可以使用幻灯片事件来完成，但我在计算时遇到了一些麻烦：

$(...).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/

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

1 个答案: