jQuery 圆形滑块答案

【问题标题】：jQuery rounded sliderjQuery 圆形滑块
【发布时间】：2012-04-17 06:20:06
【问题描述】：

我想做一个如下图所示的圆形滑块。 jQuery 能做到这一点吗？

我知道直线滑块的工作原理，但我想制作一个 HTML5 圆形滑块。这是我在网上找到的 http://jsfiddle.net/XdvNg/1/ - 但我不知道如何获取用户放开的滑块值

【问题讨论】：

也许您可以尝试或看看它是如何工作的？ codecanyon.net/item/360-round-slider-jquery-plugin/1433178
我看到的是我不能用那个@Lollero 来做蓝色滑块
好吧，您说您不知道如何获取值，并且该插件会给出值。否则，您拥有的代码确实可以更好地工作。
您希望我们为您编写它吗？
@AlexReynolds 不，但最好对如何去做。

标签： jquery html slider volume

【解决方案1】：

这是我想出的：

jsBin demo

$(function () {
    var $circle = $('#circle'),
        $handler = $('#handler'),
        $p = $('#test'),
        handlerW2 = $handler.width()/2,
        rad = $circle.width()/2,
        offs = $circle.offset(),
        elPos = {x:offs.left, y:offs.top},
        mHold = 0,
        PI2 = Math.PI/180;
    $handler.mousedown(function() { mHold = 1; });
    $(document).mousemove(function(e) {
        if (mHold) {
            var mPos = {x:e.pageX-elPos.x, y:e.pageY-elPos.y},
                atan = Math.atan2(mPos.x-rad, mPos.y-rad),
                deg  = -atan/PI2+180,
                perc = (deg*100/360)|0,
                X = Math.round(rad*  Math.sin(deg*PI2)),    
                Y = Math.round(rad* -Math.cos(deg*PI2));
            $handler.css({left:X+rad-handlerW2, top:Y+rad-handlerW2, transform:'rotate('+deg+'deg)'});
        }
    }).mouseup(function() { mHold = 0; });
});

【讨论】：

【解决方案2】：

这是 Roko 脚本的小改进版本： jsFiddle demo

为了计算鼠标位置，我使用事件偏移量（firefox 的小修复），如果事件目标不是#rotationSliderContainer，则更正。我还添加了 90 度的倍数的吸引力。

$(function(){
    var $container = $('#rotationSliderContainer');
    var $slider = $('#rotationSlider');
    var $degrees = $('#rotationSliderDegrees');

    var sliderWidth = $slider.width();
    var sliderHeight = $slider.height();
    var radius = $container.width()/2;
    var deg = 0;    

    X = Math.round(radius* Math.sin(deg*Math.PI/180));
    Y = Math.round(radius*  -Math.cos(deg*Math.PI/180));
    $slider.css({ left: X+radius-sliderWidth/2, top: Y+radius-sliderHeight/2 });

    var mdown = false;
    $container
    .mousedown(function (e) { mdown = true; e.originalEvent.preventDefault(); })
    .mouseup(function (e) { mdown = false; })
    .mousemove(function (e) {
        if(mdown)
        {

            // firefox compatibility
            if(typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") {
               var targetOffset = $(e.target).offset();
               e.offsetX = e.pageX - targetOffset.left;
               e.offsetY = e.pageY - targetOffset.top;
            }

            if($(e.target).is('#rotationSliderContainer'))
                var mPos = {x: e.offsetX, y: e.offsetY};
            else
                var mPos = {x: e.target.offsetLeft + e.offsetX, y: e.target.offsetTop + e.offsetY};

            var atan = Math.atan2(mPos.x-radius, mPos.y-radius);
            deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 


            // for attraction to multiples of 90 degrees
            var distance = Math.abs( deg - ( Math.round(deg / 90) * 90 ) );

            if( distance <= 5 )
                deg = Math.round(deg / 90) * 90;

            if(deg == 360)
                deg = 0;

            X = Math.round(radius* Math.sin(deg*Math.PI/180));
            Y = Math.round(radius*  -Math.cos(deg*Math.PI/180));

            $slider.css({ left: X+radius-sliderWidth/2, top: Y+radius-sliderHeight/2 });              

            var roundDeg = Math.round(deg);

            $degrees.html(roundDeg + '&deg;');
            $('#imageRotateDegrees').val(roundDeg);

        }
    });
});

【讨论】：

【解决方案3】：

这是满足您要求的 jQuery roundSlider 插件，它在移动设备和触摸设备上也能正常工作。

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

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

请查看jsFiddle的demo。

输出截图：

您可以根据需要自定义外观。请查看here 了解一些自定义外观。

【讨论】：