jQuery UI：一次捕捉的平滑滑塊（默認值）？

Question

我想製作一個滑塊，該滑塊可以對齊中心，同時在別處保持平滑的動作。就像現實生活中的揚聲器平衡滑塊的jQuery版本。可能嗎？

或者我應該用一個可拖動的對象創建自己的滑塊，通過包含它的框架縮小到一個軸，捕捉到位於框架中心的另一個對象（或網格）？

編輯：我只需要一個滑塊，它允許例如從-10到-1,0和1到10（在-1和1之間捕捉到0），步驟：0.1

Answer 1

您應該能夠使用jQuery的滑塊，但限制其與slide event運動：

jSlider.slider({ 
    // other options... 
    slide: function (event, ui) { 
     if (ui.value > -1 && ui.value < 1 && ui.value != 0) { 
      // force it to 0 between -1 and 1. 
      jSlider.slider('value', 0); 
      return false; 
     } 
     return true; 
    } 
}); 

Answer 2

嗯......所以這就是我想象中的我的頭...... A像旋轉木馬一樣在計時器上滑動的背景（也許這些都是很大的圖像），頂部有一排縮略圖，滑動順暢。那你想要建立什麼？

編輯：下面是你需要做的：

我很少發現需要使用jQuery插件。這裏是你需要的：

1. Mousedown（在滑塊上）。 api.jquery.com/mousedown/。在發佈時有一個回調鼠標。滑塊容器內

2. 跟蹤鼠標的位置，當你拖動滑塊docs.jquery.com/Tutorials:Mouse_Position

3. 使用動畫功能移動滑塊，同時鼠標還沒有被釋放api.jquery.com/animate/停止發佈動畫。

4. 當滑塊到達容器中的某個x位置時，強制執行「平滑」功能 - 即不同的動畫功能。

Answer 3

使用下讓你的jQuery的滑塊自動對齊到該步驟中的最近。訣竅是實現您自己的步驟間隔滑塊。問題是，如果你的最大值和最小值被一小段距離分開（例如5-10），你的幻燈片會按步驟行動，因爲默認步長= 1，所以你需要根據它來計算你的步長。如果你的最大最小值是由一個巨大的距離分開（例如1-1000或以上），你可以離開computed_step計算並初始化爲1

 max_limit = 30; 
     min_limit = 5; 
     stick_to_steps_of = 5; 
     var computed_step = max_term/100; //you can vary the denominator to make it smoother 
     $("#my_slider").slider({ 
      animate : true, 
      value: max_limit, 
      min: min_limit, 
      max: max_limit, 
      step: computed_step, 
      stop: function(event, ui) { 
       d = parseInt(parseInt(ui.value)/stick_to_steps_of); 
       rem = parseInt(ui.value)%stick_to_steps_of; 
       var fval = 0; 
       if (rem <= parseInt(stick_to_steps_of/2)) { 
        fval = d*stick_to_steps_of; 
       }else{ 
        fval = (d+1)*stick_to_steps_of; 
       } 
       $("#my_slider").slider('option', 'value', fval); 
       $('#myslider_current_value').html(fval); //some placeholder to show the current value 
      } 
     });