jQuery 圆形滑块

问题描述

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

我知道直线滑块的工作原理，但我想制作一个 HTML5 圆形滑块.这是我在网上找到的

$(function () {var $circle = $('#circle'),$handler = $('#handler'),$p = $('#test'),handlerW2 = $handler.width()/2,弧度 = $circle.width()/2,offs = $circle.offset(),elPos = {x:offs.left, y:offs.top},mHold = 0,PI2 = 数学.PI/180；$handler.mousedown(function() { mHold = 1; });$(文档).mousemove(函数(e) {如果(mHold){var mPos = {x:e.pageX-elPos.x, y:e.pageY-elPos.y},atan = Math.atan2(mPos.x-rad, mPos.y-rad),度 = -atan/PI2+180，perc = (度*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 圆形滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！