jQuery：创建一个圆形滑块

Posted 2023-05-08

【中文标题】jQuery：创建一个圆形滑块

【英文标题】：jQuery: Creating a circular slider

【发布时间】：2010-09-25 23:13:20

【问题描述】：

您之前可能见过 javascript 滑块：

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

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

【参考方案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;

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

【讨论】：

你将如何实现这个我正在寻找同样的东西并找到了这个线程，但我不知道我将如何实现该代码

同样的问题数学很容易，但你将如何实现前端？您如何使用 div 之类的结构来构建它？

背后的数学：圆的参数方程mathopenref.com/coordparamcircle.html

【参考方案2】：

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

一些解释和一个演示。

【参考方案3】：

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

Demo Page & Documentation

【参考方案4】：

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

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

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

请查看jsFiddle的演示。

相关答案： https://***.com/a/31367164/1845801 和 https://***.com/a/31369265/1845801

截图：