3

我有一个数组

valmap = [5,4,3,2,1,0,1,2,3,4,5];

现在，例如滑块的句柄位于轨道数组 [5] 上，即 0，句柄位于轨道的中心。当我单击为 5 的轨道数组 [0] 时，手柄应仅移动到为 1 的轨道数组 [4]，而不是直接移动到数组 [0] 或等于 5 的轨道末端。

它应该找到最近的数组。例如，句柄在数组 [5] 上，其值为 0。当单击左侧轨道时，它应该找到最近的数组，并且应该是数组 [4]，其值为 1。

当我再次单击轨道时，现在我将单击轨道的右侧，手柄应移回数组 [5]，这是滑块的中心，等于 0。

我怎样才能做到这一点？

这是我的代码：

$(document).ready(function() {
    var valMap = [5,4,3,2,1,0,1,2,3,4,5]; //0 is the default camera zoom
    var slider = $( "#slider" ).slider({
      disabled: false,
      animate: true,
      min: 0,
      max: valMap.length-1,
      values: [5],
      slide: function( event, ui ) {
        $( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
        slider.slider("option", "animate", "slow");        
      }
    });
});

这是一个 jsfiddle：http: //jsfiddle.net/endl3ss/jNwww/

编辑添加说明：

例如，我点击轨道的左侧，手柄在中心，手柄不应该直接跳到我点击鼠标的轨道左侧，它应该寻找下一个数组并移动到那里而不是跳到数组的末尾。

4

1 回答 1

1

看看这个。。终于明白了。。

希望这就是你要找的..

$(function() {
    var prevValue=100;
    $( "#slider" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {

            if (prevValue>ui.value){
                ui.value= prevValue-50;
            }else{
                ui.value= prevValue+50;
            }
            prevValue=ui.value;

            $( "#amount" ).val( "$" + ui.value );
            $( "#slider" ).slider( "option", "value", prevValue );
            $('#slider').trigger(e);
            }
    });


    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
于 2013-05-16T03:49:18.940 回答