jQuery圆形滑块

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

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

Answer 1

这是我想出的：

jsBin演示

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

Answer 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 + '°'); $('#imageRotateDegrees').val(roundDeg); } }); }); 

Answer 3

这是适合您需求的jQuery roundSlider插件，它在移动设备和触摸设备中也能很好地工作。

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

有关更多详细信息，请查看演示和文档页面。

请查看jsFiddle的演示 。

输出的屏幕截图：

您可以根据需要自定义外观。 请在这里查看一些自定义外观。