Radio Knob Slider(jQuery)

时间:2012-03-28 08:22:12

标签: jquery scroll slider

所以这就是我真正想做的事情, 我正在创建一个网络应用程序,允许通过旋转旋钮调整电台,但我不知道如何做,我知道onClick和那种类型的功能,但我如何将图像从90移动到180不制作多个图像的度数,并根据它们放手的时间存储其位置。

例如: 说我们有 88.0至108.9

我希望每次轮到1, 所以88.0变成了88.1等。

由于

3 个答案:

答案 0 :(得分:0)

Hiya 工作演示:只需勾选一下: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>

​

干杯!

答案 1 :(得分:0)

如果您正在搜索如何旋转图像,那么您一定要看一下:Transform in jQuery

有一个名为jQuery rotate的jQuery插件:http://code.google.com/p/jqueryrotate/

答案 2 :(得分:0)