jQuery：创建一个圆形滑块

Question

您之前可能已经看过JavaScript滑块：

http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html

我想象的是一个圆形滑块。它将包含圆圈上一个点上的可拖动按钮 - 该按钮可以沿着环的任何位置拖动。该值取决于按钮的位置（想想时钟）。

Answer 1

定义中心点c 当前鼠标点在m

在鼠标拖动事件处理程序中，你有

var dx = m.x-c.x;
var dy = m.y-c.y;

var scale = radius/Math.sqrt(dx*dx+dy*dy);

slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;

半径是滑块的某个预设值，

Answer 2

这个怎么样：http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui

一些解释和演示。

Answer 3

我写了jQuery plugin，支持完整/半圆滑块。

Demo Page＆amp; Documentation

Answer 4

从这里http://roundsliderui.com/检查jQuery roundSlider插件。这正是你想要的。

这个滑翔机有类似jQuery ui滑块的选项。它支持默认，最小范围和范围滑块类型。不仅圆形滑块还支持各种circle shapes，例如四分之一，一半和饼形圆形状。

有关详细信息，请查看demos和documentation页。

请从jsFiddle查看演示。

相关回答： https://stackoverflow.com/a/31367164/1845801和https://stackoverflow.com/a/31369265/1845801

<强>截图：