jQuery：创建一个圆形滑块答案

【问题标题】：jQuery: Creating a circular sliderjQuery：创建一个圆形滑块
【发布时间】：2010-09-25 23:13:20
【问题描述】：

您之前可能见过 JavaScript 滑块：

我设想的是一个圆形滑块。它将在圆上的一个点上包含一个可拖动的按钮——并且该按钮可以沿着圆环拖动到任何地方。该值取决于按钮所在的位置（想想时钟）。

【问题讨论】：

【解决方案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;

半径是滑块的一些预设值，

【讨论】：

【解决方案2】：

一些解释和一个演示。

【讨论】：

【解决方案3】：

我写了一个jQuery plugin，它支持全圆/半圆滑块。

【讨论】：

【解决方案4】：

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

这个圆形滑块具有与 jQuery ui 滑块类似的选项。它支持默认、最小范围和范围滑块类型。不仅是圆形滑块，它还支持各种circle shapes，例如四分之一、half和pie圆形。

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

请查看jsFiddle的演示。

截图：

【讨论】：