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 

那么就应该周围一圈旋转.. 201 FO ui一个值将在相同的位置，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. 

为罪，这几乎是相同的，除了这里，我们确实希望得到的结果是-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 

人机工程学：圆。

Answer 2

我认为jQuery roundSlider插件是适合这个要求。

欲了解更多详情，请查看demos和documentation页面。