jquery移动滑块的半圆形答案

【问题标题】：Semi-circular shape of jquery mobile sliderjquery移动滑块的半圆形
【发布时间】：2012-05-09 16:30:12
【问题描述】：

jQuery mobile中水平滑块的形状可以改成半圆形吗？

http://jquerymobile.com/test/docs/forms/slider/

我正在查看 js 文件，但不知道如何处理它。我正在研究它，以便可以在 Android 应用中使用它。

有什么建议吗？

【问题讨论】：

标签： jquery jquery-ui jquery-mobile slider

【解决方案1】：

你可以使用jQueryroundSlider插件，它也支持移动设备和触控设备。

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

请通过jsFiddle查看您的需求演示。

输出截图：

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

【讨论】：

【解决方案2】：

这是该小部件的初始化 HTML：

<div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
    <a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-valuetext="33" title="33" aria-labelledby="slider-0-label" style="left: 33%; ">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text"></span>
        </span>
    </a>
</div>

如您所见，它只是一个 DIV 元素。因此，您可以为 DIV 分配不同的背景图像以显示圆形轨道，但要让滑块以圆形方式移动会困难得多。

这是你的开始：

var mousedown = false;
$(document).delegate('.ui-slider-handle', 'mousedown mouseup mousemove', function (event) {
    if (event.type == 'mousedown') {
        mousedown = true;
    } else if (event.type == 'mouseup') {
        mousedown = false;
    } else if (mousedown) {
        var max     = 150,
            percent = (parseInt(this.style.left) / 100);
        this.style.top = (50 - (Math.sin(percent) * max)) + '%';
    }
});

还有一个演示：http://jsfiddle.net/yRrYL/1/

【讨论】：

是的，我知道，但我只是想找个地方开始！
好吧..我真的试过了......这很有意义，但我猜想弯曲的运动仍然是一项艰巨的任务。
element.style.left 属性为您提供了滑过滑块的百分比。你现在需要想出一个函数来接收这个水平位置并沿曲线输出一个垂直位置，这就是我使用Math.sin()但我没有花时间正确设置它的原因。

【解决方案3】：

我认为逻辑是当滑块移动时，您希望手柄在 x 轴上移动时在 y 轴上移动。假设该区域是一个正方形，并且您将半圆形背景图像作为轨道。您可以应用除 y 之外的 x 轴的逻辑，只要面积是正方形，计算就可以保持不变。开始这样好吗？

【讨论】：