3

私は配列を持っています

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

たとえば、スライダーのハンドルは 0 のトラック配列 [5] にあり、ハンドルはトラックの中心にあります。5 のトラック配列 [0] をクリックすると、ハンドルは 1 のトラック配列 [4] にのみ移動し、配列 [0] または 5 に等しいトラックの最後には直接移動しません。

最も近い配列を見つける必要があります。たとえば、ハンドルは配列 [5] にあり、値は 0 です。左側のトラックをクリックすると、最も近い配列が検出され、値が 1 の配列 [4] になります。

再びトラックをクリックすると、トラックの右側をクリックすると、ハンドルが 0 に等しいスライダーの中心である配列 [5] に戻ります。

どうやってやるの？

これが私のコードです：

$(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 に答える