jQuery圆形滑块？
我在我的网站上有。我想将滑块移动到360度。如何更改以下脚本以执行此操作jQuery圆形滑块？,jquery,slider,round-slider,Jquery,Slider,Round Slider,我在我的网站上有。我想将滑块移动到360度。如何更改以下脚本以执行此操作 $(document).ready(function() { /*Slider */ $('.slider-input').each(function() { var currVal = $(this).val(); if(currVal < 0){ currVal = 0; } $(this).parent().
$(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.
}
});
});
});
$（文档）.ready（函数（）{
/*滑块*/
$（'.slider input'）。每个（函数（）{
var currVal=$（this.val（）；
if（currVal<0）{
currVal=0；
}
$（this）.parent（）.children（'.slider content'）.slider({
“动画”：正确，
“min”：-1，
“max”：201，
“值”：201，
“方向”：“垂直”，
“停止”：函数（e、ui）{
//$（this.prev（'.slider input'）.val（ui.value）；//设置实际输入字段val，改为在幻灯片中完成
//如果我们在底部越界，将手柄弹回到顶部
/*
如果（ui.value==-1）{
ui.value=201；
$（this.children（'.ui滑块句柄'）.css（'bottom'，'100%）；
}
*/
},
“幻灯片”：功能（e、ui）{
左心室；
var次值；
var Y=ui.value-100；//查找圆心（我们使用的最大值和高度为200）
var R=100；//圆的半径
var skip=false；
$（this）.children（'.ui滑块句柄'）.attr（'href'，'ui.val='+ui.value）；
//显示默认/禁用/越界状态
如果（ui.value>0&&ui.value<201）{//如果在有效的幻灯片范围内
$（this）.children（'.ui滑块句柄'）.addClass（'is-active'）；
}
否则{
$（this）.children（'.ui滑块句柄'）.removeClass（'is-active'）；
}
//通过设置背景位置，计算滑块在圆上的路径，将其放在那个里
如果（ui.value>=0&&ui.value 100）{percentLeft=100；}
$（this）.children（'.ui滑块句柄'）.css（'background-position'，percentLeft+'%100%'）；//设置css精灵
//计算并设置输入值
如果（跳过==真）{
次值='keine Seite'；
$（this）.children（'.ui滑块句柄'）.css（'background-position'，percentLeft+'%0%'）；//重置css精灵
}
否则{
submitValue=Math.round（ui.value/2）；//将输入值钳制在0-100范围内
}
$（“#仅显示输入”）.val（submitValue）；//仅显示所选值，仅演示
$（“#滑块显示”）.text（submitValue）；//显示选定值，仅演示
$（this.prev（'.slider input'）.val（ui.value）；//设置实际输入字段val.jQuery ui为我们隐藏了它，但它将被提交。
}
});
});
});
滑块的图像也必须旋转360度。要计算圆，可以使用以下公式
precenttop = (-(cos(ui.value/(100/pi))-1))*50)
percentleft = (sin(ui.value/(100/pi))*50)+50
uicos(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.
因此：圆。要计算圆，可以使用以下公式
precenttop = (-(cos(ui.value/(100/pi))-1))*50)
percentleft = (sin(ui.value/(100/pi))*50)+50
uicos(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.
有关更多详细信息，请查看和页面。您是否可以更具体地说明
移动滑块上的图形移动滑块上的图形