我想做一个如下图所示的圆形滑块。
jQuery 能做到这一点吗?
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/ http://jsfiddle.net/XdvNg/1/ - but I dont know how to get the slider value one the user lets go
这是我想出的:
jsBin 演示 http://jsbin.com/bejiku/2/
$(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; });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)