对于桌面计算机用户来说，一个滚动条一样的部件即可满足音量等值调节的需求；而对于触摸屏幕用户来说，一个旋钮或许更适合他们。
本文的全部代码均来自http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/，如果您对其中的任何技术细节存在疑问，请以原文为准。
HTML
像往常一样，我们来看看HTML该怎么写：
我们的HTML代码就是这么简单。
jQuery Plugin
现在，我们引入一个jQuery插件。它为我们处理了旋钮的默认行为，使得我们最终的脚本代码变得简单：
/**
* @name jQuery KnobKnob plugin
* @author Martin Angelov
* @version 1.0
* @url http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
* @license MIT License
*/
(function($){
$.fn.knobKnob = function(props){
var options = $.extend({
snap: 0,
value: 0,
turn: function(){}
}, props || {});
var tpl = '\
\
\
';
return this.each(function(){
var el = $(this);
el.append(tpl);
var knob = $('.knob',el)
knobTop = knob.find('.top'),
startDeg = -1,
currentDeg = 0,
rotation = 0,
lastDeg = 0,
doc = $(document);
if(options.value > 0 && options.value <= 359){
rotation = currentDeg = options.value;
knobTop.css('transform','rotate('+(currentDeg)+'deg)');
options.turn(currentDeg/359);
}
knob.on('mousedown', function(e){
e.preventDefault();
var offset = knob.offset();
var center = {
y : offset.top + knob.height()/2,
x: offset.left + knob.width()/2
};
var a, b, deg, tmp,
rad2deg = 180/Math.PI;
knob.on('mousemove.rem',function(e){
a = center.y - e.pageY;
b = center.x - e.pageX;
deg = Math.atan2(a,b)*rad2deg;
// we have to make sure that negative
// angles are turned into positive:
if(deg<0){
deg = 360 + deg;
}
// Save the starting position of the drag
if(startDeg == -1){
startDeg = deg;
}
// Calculating the current rotation
tmp = Math.floor((deg-startDeg) + rotation);
// Making sure the current rotation
// stays between 0 and 359
if(tmp < 0){
tmp = 360 + tmp;
}
else if(tmp > 359){
tmp = tmp % 360;
}
// Snapping in the off position:
if(options.snap && tmp < options.snap){
tmp = 0;
}
// This would suggest we are at an end position;
// we need to block further rotation.
if(Math.abs(tmp - lastDeg) > 180){
return false;
}
currentDeg = tmp;
lastDeg = tmp;
knobTop.css('transform','rotate('+(currentDeg)+'deg)');
options.turn(currentDeg/359);
});
doc.on('mouseup.rem',function(){
knob.off('.rem');
doc.off('.rem');
// Saving the current rotation
rotation = currentDeg;
// Marking the starting degree as invalid
startDeg = -1;
});
});
});
};
})(jQuery);
这个插件接受三个参数：
snap– 分度值。这个参数决定了一个圆周会被分割为多少份value– 初始值。指的是部件初始化时候旋转的角度turn– 回调函数。这个函数在用户旋转旋钮时调用
注意，这个插件当中调用了jQuery的on和off函数，而这都是1.7版本当中新增的。
JavaScript
有了这个插件之后，剩下的事情就变得非常简单了。我们只需要使用CSS3当中的transform属性绘制一圈旋钮刻度，并且给插件的turn一个改变旋钮样子的回调函数即可。
$(function(){
var colors = [
'26e000','2fe300','37e700','45ea00','51ef00',
'61f800','6bfb00','77ff02','80ff05','8cff09',
'93ff0b','9eff09','a9ff07','c2ff03','d7ff07',
'f2ff0a','fff30a','ffdc09','ffce0a','ffc30a',
'ffb509','ffa808','ff9908','ff8607','ff7005',
'ff5f04','ff4f03','f83a00','ee2b00','e52000'
];
var rad2deg = 180/Math.PI;
var deg = 0;
var bars = $('#bars');
for(var i=0;i').css({
backgroundColor: '#'+colors[i],
transform:'rotate('+deg+'deg)',
top: -Math.sin(deg/rad2deg)*80+100,
left: Math.cos((180 - deg)/rad2deg)*80+100,
}).appendTo(bars);
}
var colorBars = bars.find('.colorBar');
var numBars = 0, lastNum = -1;
$('#control').knobKnob({
snap : 10,
value: 154,
turn : function(ratio){
numBars = Math.round(colorBars.length*ratio);
// Update the dom only when the number of active bars
// changes, instead of on every move
if(numBars == lastNum){
return false;
}
lastNum = numBars;
colorBars.removeClass('active').slice(0, numBars).addClass('active');
}
});
});
OK，搞定了。
