jQuery圆形滑块 [英] jQuery rounded slider

问题描述

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

我知道直滑块如何工作，但我想制作一个HTML5圆形滑块。
以下是我在网上找到的

  $（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;}）; 
}）; 
  

I would like to do a rounded slider like the image below. Is jQuery able to do this?

I know how a straight slider works but I would like to make a HTML5 rounded slider. Here is what I found online http://jsfiddle.net/XdvNg/1/ - but I dont know how to get the slider value one the user lets go

解决方案

Here is what I came up with:

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; });
});

这篇关于jQuery圆形滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！