无线电旋钮滑块（jQuery）

Question

这就是我真正想做的事情， 我正在创建一个网络应用程序，允许通过转动旋钮来调谐电台，但是我不确定如何操作，我知道 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！ （一次 0.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。

有一个名为 jQueryrotate 的 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/