我想做一个如下图所示的圆形滑块。jQuery 能够做到这一点吗?
我知道直线滑块的工作原理,但我想制作一个 HTML5 圆形滑块。这是我在网上找到的 http://jsfiddle.net/XdvNg/1/ - 但我不知道如何获取用户放开的滑块值
我想做一个如下图所示的圆形滑块。jQuery 能够做到这一点吗?
我知道直线滑块的工作原理,但我想制作一个 HTML5 圆形滑块。这是我在网上找到的 http://jsfiddle.net/XdvNg/1/ - 但我不知道如何获取用户放开的滑块值
这是我想出的:
$(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; });
});
这是 Roko 脚本的小改进版本: jsFiddle 演示
为了计算鼠标位置,我使用事件偏移量(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);
}
});
});