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 插件 支持全/半圆滑块。

演示页面 & 文档

Answer 4

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

这个 roundslider 具有类似的选项，如 jQuery ui slider。它支持默认、最小范围和范围滑块类型。不仅是圆形滑块，它还支持各种 圆形 例如 四分之一, 一半 和 馅饼 圆形形状。

欲了解更多详情，请查看 演示 和 文档 页。

请检查演示 jsFiddle.

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

截图：