jQuery圆形滑块？

Question

我的网站上有this slider。我想将滑块移动到 360 度。如何更改以下脚本来执行此操作？

$(document).ready(function() {
    /*Slider */
    $('.slider-input').each(function() {
        var currVal = $(this).val();
        if(currVal < 0){
            currVal = 0;
        }
        $(this).parent().children('.slider-content').slider({
            'animate': true,
            'min': -1,
            'max': 201,
            'value' : 201,
            'orientation' : 'vertical',
            'stop': function(e, ui){
                //$(this).prev('.slider-input').val(ui.value); //Set actual input field val, done during slide instead

                //pop handle back to top if we went out of bounds at bottom
                /*
                if ( ui.value == -1 ) {
                    ui.value = 201;
                    $(this).children('.ui-slider-handle').css('bottom','100%');
                }
                */
            },
            'slide': function(e, ui){
                var percentLeft;
                var submitValue;
                var Y = ui.value - 100; //Find center of Circle (We're using a max value and height of 200)
                var R = 100; //Circle's radius
                var skip = false;

                $(this).children('.ui-slider-handle').attr('href',' UI.val = ' + ui.value);

                //Show default/disabled/out of bounds state
                if ( ui.value > 0 && ui.value < 201 ) { //if in the valid slide rang
                    $(this).children('.ui-slider-handle').addClass('is-active');
                }
                else {
                    $(this).children('.ui-slider-handle').removeClass('is-active');
                }

                //Calculate slider's path on circle, put it there, by setting background-position
                if ( ui.value >= 0 && ui.value <= 200 ) { //if in valid range, these are one inside the min and max
                    var X = Math.sqrt((R*R) - (Y*Y)); //X^2 + Y^2 = R^2. Find X.
                    if ( X == 'NaN' ) {
                        percentLeft = 0;
                    }
                    else {
                        percentLeft = X;
                    }
                }
                else if ( ui.value == -1 || ui.value == 201 ) {
                    percentLeft = 0;
                    skip = true;
                }
                else {
                    percentLeft = 0;
                }

                //Move handle
                if ( percentLeft > 100 ) { percentLeft = 100; }
                $(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 100%'); //set css sprite

                //Figure out and set input value
                if ( skip == true ) {
                    submitValue = 'keine Seite';
                    $(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 0%'); //reset css sprite
                }
                else {
                    submitValue = Math.round(ui.value / 2); //Clamp input value to range 0 - 100
                }
                $('#display-only input').val(submitValue); //display selected value, demo only
                $('#slider-display').text(submitValue); //display selected value, demo only
                $(this).prev('.slider-input').val(ui.value); //Set actual input field val. jQuery UI hid it for us, but it will be submitted.
            }
        });
    });
});

滑块的图像也必须旋转 360 度。

Answer 1

要计算一个圆，您可以使用以下公式。

precenttop = (-(cos(ui.value/(100/pi))-1))*50)
percentleft = (sin(ui.value/(100/pi))*50)+50

然后它应该围绕圆圈旋转。ui 的值 201 将与 1 处于相同位置，-1 与 199 相同。

上面的解释是：

cos(ui.value/(100/pi)) <-- ui value ranges from 0 to 200 but the cosine 
                           period is 2pi so devide the ui value so its 
                           somewhere between 0 and 2pi
-1                     <-- result ranges from 1 to -1 and i prefer 0 to 2 so 
                           minus 1 makes it 0 to -2 therefore
-()                    <-- we invert the whole... now it 0 to 2
*50                    <-- since you are using percent 0*50 = 0 and 2*50 = 100
                           ergo it now bounces between 0 and 100.

对于 sin，几乎相同，只是我们确实希望结果在 -1 和 1 之间。我们只需乘以 50（-50 到 50）并加上 50（0 - 100）。

现在 ui.value 等于 0 percenttop 的结果将是 0，percentleft 将是 50。并且在

ui.value = 100 50  150 200
top =      100 50  50  0
left =     50  100 0   50

Ergo：圆圈。

Answer 2

我觉得jQuery roundSlider这个插件很适合这个需求。

更多详情请查看demos 和documentation 页面。