Radio Knob Slider（jQuery）

Question

所以這就是我真正想做的， 我正在創建一個web應用程序，允許通過轉動旋鈕來調諧電臺，但是我不確定如何做到這一點，我知道onClick和那種類型的功能，但是如何在沒有製作多個圖像的情況下將圖像從90度移動到180度，並根據它們何時放開來存儲其位置。

對於如： 說我們有 88.0至108.9

我想每個轉由1往上走的時候， 所以88.0變爲88.1等

感謝

喜歡

Answer 1

你好工作演示：在這裏打個勾：http://jsfiddle.net/WwkB8/4/（你會看到區別:) - （帶2個刻度）http://jsfiddle.net/WwkB8/2/

這將有助於：如果您有任何代碼在其他地方滑動，請參閱上面的代碼和工作演示鏈接。希望這是有用的。從88.0上升到108.9！ （雲.1一時間，88.0 88.1）

jQuery代碼

$(document).ready(function() { 
    $("#slider").slider({ 
     min: 88.0, 
     max: 109.0, 
     step: .1, 
     values: [88.0], // In case of 2 tick slider values: [88.0, another value] 
     slide: function(event, ui) { 
      for (var i = 0; i < ui.values.length; ++i) { 
       $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
      } 
     } 
    }); 

    $("input.sliderValue").change(function() { 
     var $this = $(this); 
     $("#slider").slider("values", $this.data("index"), $this.val()); 
    }); 
});​ 

HTML

<form> 
    <div> 
     <input type="text" class="sliderValue" data-index="0" value="88.0" /> 
     <input type="text" class="sliderValue" data-index="1" value="108.9" /> 
    </div> 
    <br /> 
    <div id="slider"></div> 
</form> 

​ 

乾杯！

Answer 2

如果您正在搜索如何旋轉圖像，您應該先確認一下：Transform in jQuery。

有一個jQuery插件叫做jQuery的旋轉：http://code.google.com/p/jqueryrotate/

Answer 3

可以修改jQuery.UI滑塊控件的外觀：

http://jqueryui.com/demos/slider/

http://papermashup.com/jquery-ui-slider/

http://www.youtube.com/watch?v=dh_3j_v8USU

http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/