jquery颜色选取器特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery颜色选取器特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery颜色选取器特效</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serifl;color:#5a5a5a;}
/* pagedemo */
.pagedemo{width:700px;margin:0 auto;text-align:left;}
.pagedemo h1{font-size:21px;height:47px;line-height:47px;text-transform:uppercase;}
.tabsContent{border:1px solid #ccc;width:698px;overflow:hidden;}
.tab{padding:16px;}
.tab h2{font-weight:bold;font-size:16px;}
.tab h3{font-weight:bold;font-size:14px;margin-top:20px;}
.tab p{margin-top:16px;clear:both;}
.tab ul{margin-top:16px;list-style:disc;}
.tab li{margin:10px 0 0 35px;}
.tab a{color:#8FB0CF;}
.tab strong{font-weight:bold;}
.tab pre{font-size:11px;margin-top:20px;width:668px;overflow:auto;clear:both;}
.tab table{width:100%;}
.tab table td{padding:6px 10px 6px 0;vertical-align:top;}
.tab dt{margin-top:16px;}
/* colorSelector */
#colorSelector{position:relative;width:36px;height:36px;background:url(images/select.png);}
#colorSelector div{position:absolute;top:3px;left:3px;width:30px;height:30px;background:url(images/select.png) center;}
#colorSelector2{position:absolute;top:0;left:0;width:36px;height:36px;background:url(images/select2.png);}
#colorSelector2 div{position:absolute;top:4px;left:4px;width:28px;height:28px;background:url(images/select2.png) center;}
#colorpickerHolder2{top:32px;left:0;width:356px;height:0;overflow:hidden;position:absolute;}
#colorpickerHolder2 .colorpicker{background-image:url(images/custom_background.png);position:absolute;bottom:0;left:0;}
#colorpickerHolder2 .colorpicker_hue div{background-image:url(images/custom_indic.gif);}
#colorpickerHolder2 .colorpicker_hex{background-image:url(images/custom_hex.png);}
#colorpickerHolder2 .colorpicker_rgb_r{background-image:url(images/custom_rgb_r.png);}
#colorpickerHolder2 .colorpicker_rgb_g{background-image:url(images/custom_rgb_g.png);}
#colorpickerHolder2 .colorpicker_rgb_b{background-image:url(images/custom_rgb_b.png);}
#colorpickerHolder2 .colorpicker_hsb_s{background-image:url(images/custom_hsb_s.png);display:none;}
#colorpickerHolder2 .colorpicker_hsb_h{background-image:url(images/custom_hsb_h.png);display:none;}
#colorpickerHolder2 .colorpicker_hsb_b{background-image:url(images/custom_hsb_b.png);display:none;}
#colorpickerHolder2 .colorpicker_submit{background-image:url(images/custom_submit.png);}
#colorpickerHolder2 .colorpicker input{color:#778398;}
#customWidget{position:relative;height:36px;}
</style>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(function(){
	$('#colorpickerHolder').ColorPicker({flat: true});
	
	$('#colorpickerHolder2').ColorPicker({
		flat: true,
		color: '#00ff00',
		onSubmit: function(hsb, hex, rgb) {
			$('#colorSelector2 div').css('backgroundColor', '#' + hex);
		}
	});
	$('#colorpickerHolder2>div').css('position', 'absolute');
	var widt = false;
	$('#colorSelector2').bind('click', function() {
		$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
		widt = !widt;
	});
	
	$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
	});
	$('#colorSelector').ColorPicker({
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorSelector div').css('backgroundColor', '#' + hex);
		}
	});
});
</script>
</head>
<body>
    <div class="pagedemo">
        <h1>颜色选择器 - jQuery插件</h1>
        <div class="tabsContent">
            <div class="tab">
                <h2>介绍</h2>
                <p>一个简单的组件来选择色彩在你选择的颜色一样Adobe Photoshop</p>
                <h3>特征</h3>
                <ul>
                    <li>在页面元素平面模式</li>
                    <li>颜色选择功能强大的控件</li>
					<li>容易定制通过改变一些图像的外观</li>
					<li>可视选择器颜色变化</li>
                </ul>
                <h3>例子</h3>
                <p>平面模式</p>
                <p id="colorpickerHolder">
                </p>
                <pre>
$('#colorpickerHolder').ColorPicker({flat: true});
                </pre>
                <p>自定义皮肤，并使用平面模式显示在一个自定义的颜色选择器部件。.</p>
				<div id="customWidget">
					<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
	                <div id="colorpickerHolder2">
	                </div>
				</div>

				<p>附加到一个文本字段，并使用回调函数来更新字段的值的颜色，并提交颜色设置在该领域的值。</p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
				<pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});
</pre>
				<p>使用回调的实现预览的颜色和添加颜色动画。</p>
				<p>
					<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
				</p>
				<pre>
$('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
	}
});
</pre>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(colorpicker.js):

/** * * Color picker * Author:Stefan Petre www.eyecon.ro * * Dual licensed under the MIT and GPL licenses * */
(function ($){
	var ColorPicker = function (){
	varids ={
}
,inAction,charMin = 65,visible,tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',defaults ={
	eventName:'click',onShow:function (){
}
,onBeforeShow:function(){
}
,onHide:function (){
}
,onChange:function (){
}
,onSubmit:function (){
}
,color:'ff0000',livePreview:true,flat:false}
,fillRGBFields = function (hsb,cal){
	var rgb = HSBToRGB(hsb);
	$(cal).data('colorpicker').fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end();
}
,fillHSBFields = function (hsb,cal){
	$(cal).data('colorpicker').fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end();
}
,fillHexFields = function (hsb,cal){
	$(cal).data('colorpicker').fields.eq(0).val(HSBToHex(hsb)).end();
}
,setSelector = function (hsb,cal){
	$(cal).data('colorpicker').selector.css('backgroundColor','#' + HSBToHex({
	h:hsb.h,s:100,b:100}
));
	$(cal).data('colorpicker').selectorIndic.css({
	left:parseInt(150 * hsb.s/100,10),top:parseInt(150 * (100-hsb.b)/100,10)}
);
}
,setHue = function (hsb,cal){
	$(cal).data('colorpicker').hue.css('top',parseInt(150 - 150 * hsb.h/360,10));
}
,setCurrentColor = function (hsb,cal){
	$(cal).data('colorpicker').currentColor.css('backgroundColor','#' + HSBToHex(hsb));
}
,setNewColor = function (hsb,cal){
	$(cal).data('colorpicker').newColor.css('backgroundColor','#' + HSBToHex(hsb));
}
,keyDown = function (ev){
	var pressedKey = ev.charCode || ev.keyCode || -1;
	if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32){
	return false;
}
var cal = $(this).parent().parent();
	if (cal.data('colorpicker').livePreview === true){
	change.apply(this);
}
}
,change = function (ev){
	var cal = $(this).parent().parent(),col;
	if (this.parentNode.className.indexOf('_hex') > 0){
	cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
}
else if (this.parentNode.className.indexOf('_hsb') > 0){
	cal.data('colorpicker').color = col = fixHSB({
	h:parseInt(cal.data('colorpicker').fields.eq(4).val(),10),s:parseInt(cal.data('colorpicker').fields.eq(5).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(6).val(),10)}
);
}
else{
	cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
	r:parseInt(cal.data('colorpicker').fields.eq(1).val(),10),g:parseInt(cal.data('colorpicker').fields.eq(2).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(3).val(),10)}
));
}
if (ev){
	fillRGBFields(col,cal.get(0));
	fillHexFields(col,cal.get(0));
	fillHSBFields(col,cal.get(0));
}
setSelector(col,cal.get(0));
	setHue(col,cal.get(0));
	setNewColor(col,cal.get(0));
	cal.data('colorpicker').onChange.apply(cal,[col,HSBToHex(col),HSBToRGB(col)]);
}
,blur = function (ev){
	var cal = $(this).parent().parent();
	cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
}
,focus = function (){
	charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70:65;
	$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
	$(this).parent().addClass('colorpicker_focus');
}
,downIncrement = function (ev){
	var field = $(this).parent().find('input').focus();
	var current ={
	el:$(this).parent().addClass('colorpicker_slider'),max:this.parentNode.className.indexOf('_hsb_h') > 0 ? 360:(this.parentNode.className.indexOf('_hsb') > 0 ? 100:255),y:ev.pageY,field:field,val:parseInt(field.val(),10),preview:$(this).parent().parent().data('colorpicker').livePreview}
;
	$(document).bind('mouseup',current,upIncrement);
	$(document).bind('mousemove',current,moveIncrement);
}
,moveIncrement = function (ev){
	ev.data.field.val(Math.max(0,Math.min(ev.data.max,parseInt(ev.data.val + ev.pageY - ev.data.y,10))));
	if (ev.data.preview){
	change.apply(ev.data.field.get(0),[true]);
}
return false;
}
,upIncrement = function (ev){
	change.apply(ev.data.field.get(0),[true]);
	ev.data.el.removeClass('colorpicker_slider').find('input').focus();
	$(document).unbind('mouseup',upIncrement);
	$(document).unbind('mousemove',moveIncrement);
	return false;
}
,downHue = function (ev){
	var current ={
	cal:$(this).parent(),y:$(this).offset().top}
;
	current.preview = current.cal.data('colorpicker').livePreview;
	$(document).bind('mouseup',current,upHue);
	$(document).bind('mousemove',current,moveHue);
}
,moveHue = function (ev){
	change.apply(ev.data.cal.data('colorpicker').fields.eq(4).val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150,10)).get(0),[ev.data.preview]);
	return false;
}
,upHue = function (ev){
	fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));
	fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));
	$(document).unbind('mouseup',upHue);
	$(document).unbind('mousemove',moveHue);
	return false;
}
,downSelector = function (ev){
	var current ={
	cal:$(this).parent(),pos:$(this).offset()}
;
	current.preview = current.cal.data('colorpicker').livePreview;
	$(document).bind('mouseup',current,upSelector);
	$(document).bind('mousemove',current,moveSelector);
}
,moveSelector = function (ev){
	change.apply(ev.data.cal.data('colorpicker').fields.eq(6).val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150,10)).end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150,10)).get(0),[ev.data.preview]);
	return false;
}
,upSelector = function (ev){
	fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));
	fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));
	$(document).unbind('mouseup',upSelector);
	$(document).unbind('mousemove',moveSelector);
	return false;
}
,enterSubmit = function (ev){
	$(this).addClass('colorpicker_focus');
}
,leaveSubmit = function (ev){
	$(this).removeClass('colorpicker_focus');
}
,clickSubmit = function (ev){
	var cal = $(this).parent();
	var col = cal.data('colorpicker').color;
	cal.data('colorpicker').origColor = col;
	setCurrentColor(col,cal.get(0));
	cal.data('colorpicker').onSubmit(col,HSBToHex(col),HSBToRGB(col),cal.data('colorpicker').el);
}
,show = function (ev){
	var cal = $('#' + $(this).data('colorpickerId'));
	cal.data('colorpicker').onBeforeShow.apply(this,[cal.get(0)]);
	var pos = $(this).offset();
	var viewPort = getViewport();
	var top = pos.top + this.offsetHeight;
	var left = pos.left;
	if (top + 176 > viewPort.t + viewPort.h){
	top -= this.offsetHeight + 176;
}
if (left + 356 > viewPort.l + viewPort.w){
	left -= 356;
}
cal.css({
	left:left + 'px',top:top + 'px'}
);
	if (cal.data('colorpicker').onShow.apply(this,[cal.get(0)]) != false){
	cal.show();
}
$(document).bind('mousedown',{
	cal:cal}
,hide);
	return false;
}
,hide = function (ev){
	if (!isChildOf(ev.data.cal.get(0),ev.target,ev.data.cal.get(0))){
	if (ev.data.cal.data('colorpicker').onHide.apply(this,[ev.data.cal.get(0)]) != false){
	ev.data.cal.hide();
}
$(document).unbind('mousedown',hide);
}
}
,isChildOf = function(parentEl,el,container){
	if (parentEl == el){
	return true;
}
if (parentEl.contains){
	return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ){
	return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
	while(prEl && prEl != container){
	if (prEl == parentEl)return true;
	prEl = prEl.parentNode;
}
return false;
}
,getViewport = function (){
	var m = document.compatMode == 'CSS1Compat';
	return{
	l:window.pageXOffset || (m ? document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset || (m ? document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth || (m ? document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight || (m ? document.documentElement.clientHeight:document.body.clientHeight)}
;
}
,fixHSB = function (hsb){
	return{
	h:Math.min(360,Math.max(0,hsb.h)),s:Math.min(100,Math.max(0,hsb.s)),b:Math.min(100,Math.max(0,hsb.b))}
;
}
,fixRGB = function (rgb){
	return{
	r:Math.min(255,Math.max(0,rgb.r)),g:Math.min(255,Math.max(0,rgb.g)),b:Math.min(255,Math.max(0,rgb.b))}
;
}
,fixHex = function (hex){
	var len = 6 - hex.length;
	if (len > 0){
	var o = [];
	for (var i=0;
	i<len;
	i++){
	o.push('0');
}
o.push(hex);
	hex = o.join('');
}
return hex;
}
,HexToRGB = function (hex){
	var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1):hex),16);
	return{
	r:hex >> 16,g:(hex & 0x00FF00) >> 8,b:(hex & 0x0000FF)}
;
}
,HexToHSB = function (hex){
	return RGBToHSB(HexToRGB(hex));
}
,RGBToHSB = function (rgb){
	var hsb ={
	h:0,s:0,b:0}
;
	var min = Math.min(rgb.r,rgb.g,rgb.b);
	var max = Math.max(rgb.r,rgb.g,rgb.b);
	var delta = max - min;
	hsb.b = max;
	if (max != 0){
}
hsb.s = max != 0 ? 255 * delta / max:0;
	if (hsb.s != 0){
	if (rgb.r == max){
	hsb.h = (rgb.g - rgb.b) / delta;
}
else if (rgb.g == max){
	hsb.h = 2 + (rgb.b - rgb.r) / delta;
}
else{
	hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
}
else{
	hsb.h = -1;
}
hsb.h *= 60;
	if (hsb.h < 0){
	hsb.h += 360;
}
hsb.s *= 100/255;
	hsb.b *= 100/255;
	return hsb;
}
,HSBToRGB = function (hsb){
	var rgb ={
}
;
	var h = Math.round(hsb.h);
	var s = Math.round(hsb.s*255/100);
	var v = Math.round(hsb.b*255/100);
	if(s == 0){
	rgb.r = rgb.g = rgb.b = v;
}
else{
	var t1 = v;
	var t2 = (255-s)*v/255;
	var t3 = (t1-t2)*(h%60)/60;
	if(h==360) h = 0;
	if(h<60){
	rgb.r=t1;
	rgb.b=t2;
	rgb.g=t2+t3}
else if(h<120){
	rgb.g=t1;
	rgb.b=t2;
	rgb.r=t1-t3}
else if(h<180){
	rgb.g=t1;
	rgb.r=t2;
	rgb.b=t2+t3}
else if(h<240){
	rgb.b=t1;
	rgb.r=t2;
	rgb.g=t1-t3}
else if(h<300){
	rgb.b=t1;
	rgb.g=t2;
	rgb.r=t2+t3}
else if(h<360){
	rgb.r=t1;
	rgb.g=t2;
	rgb.b=t1-t3}
else{
	rgb.r=0;
	rgb.g=0;
	rgb.b=0}
}
return{
	r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}
;
}
,RGBToHex = function (rgb){
	var hex = [rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];
	$.each(hex,function (nr,val){
	if (val.length == 1){
	hex[nr] = '0' + val;
}
}
);
	return hex.join('');
}
,HSBToHex = function (hsb){
	return RGBToHex(HSBToRGB(hsb));
}
,restoreOriginal = function (){
	var cal = $(this).parent();
	var col = cal.data('colorpicker').origColor;
	cal.data('colorpicker').color = col;
	fillRGBFields(col,cal.get(0));
	fillHexFields(col,cal.get(0));
	fillHSBFields(col,cal.get(0));
	setSelector(col,cal.get(0));
	setHue(col,cal.get(0));
	setNewColor(col,cal.get(0));
}
;
	return{
	init:function (opt){
	opt = $.extend({
}
,defaults,opt||{
}
);
	if (typeof opt.color == 'string'){
	opt.color = HexToHSB(opt.color);
}
else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined){
	opt.color = RGBToHSB(opt.color);
}
else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined){
	opt.color = fixHSB(opt.color);
}
else{
	return this;
}
return this.each(function (){
	if (!$(this).data('colorpickerId')){
	var options = $.extend({
}
,opt);
	options.origColor = opt.color;
	var id = 'collorpicker_' + parseInt(Math.random() * 1000);
	$(this).data('colorpickerId',id);
	var cal = $(tpl).attr('id',id);
	if (options.flat){
	cal.appendTo(this).show();
}
else{
	cal.appendTo(document.body);
}
options.fields = cal.find('input').bind('keyup',keyDown).bind('change',change).bind('blur',blur).bind('focus',focus);
	cal.find('span').bind('mousedown',downIncrement).end().find('>div.colorpicker_current_color').bind('click',restoreOriginal);
	options.selector = cal.find('div.colorpicker_color').bind('mousedown',downSelector);
	options.selectorIndic = options.selector.find('div div');
	options.el = this;
	options.hue = cal.find('div.colorpicker_hue div');
	cal.find('div.colorpicker_hue').bind('mousedown',downHue);
	options.newColor = cal.find('div.colorpicker_new_color');
	options.currentColor = cal.find('div.colorpicker_current_color');
	cal.data('colorpicker',options);
	cal.find('div.colorpicker_submit').bind('mouseenter',enterSubmit).bind('mouseleave',leaveSubmit).bind('click',clickSubmit);
	fillRGBFields(options.color,cal.get(0));
	fillHSBFields(options.color,cal.get(0));
	fillHexFields(options.color,cal.get(0));
	setHue(options.color,cal.get(0));
	setSelector(options.color,cal.get(0));
	setCurrentColor(options.color,cal.get(0));
	setNewColor(options.color,cal.get(0));
	if (options.flat){
	cal.css({
	position:'relative',display:'block'}
);
}
else{
	$(this).bind(options.eventName,show);
}
}
}
);
}
,showPicker:function(){
	return this.each( function (){
	if ($(this).data('colorpickerId')){
	show.apply(this);
}
}
);
}
,hidePicker:function(){
	return this.each( function (){
	if ($(this).data('colorpickerId')){
	$('#' + $(this).data('colorpickerId')).hide();
}
}
);
}
,setColor:function(col){
	if (typeof col == 'string'){
	col = HexToHSB(col);
}
else if (col.r != undefined && col.g != undefined && col.b != undefined){
	col = RGBToHSB(col);
}
else if (col.h != undefined && col.s != undefined && col.b != undefined){
	col = fixHSB(col);
}
else{
	return this;
}
return this.each(function(){
	if ($(this).data('colorpickerId')){
	var cal = $('#' + $(this).data('colorpickerId'));
	cal.data('colorpicker').color = col;
	cal.data('colorpicker').origColor = col;
	fillRGBFields(col,cal.get(0));
	fillHSBFields(col,cal.get(0));
	fillHexFields(col,cal.get(0));
	setHue(col,cal.get(0));
	setSelector(col,cal.get(0));
	setCurrentColor(col,cal.get(0));
	setNewColor(col,cal.get(0));
}
}
);
}
}
;
}
();
	$.fn.extend({
	ColorPicker:ColorPicker.init,ColorPickerHide:ColorPicker.hidePicker,ColorPickerShow:ColorPicker.showPicker,ColorPickerSetColor:ColorPicker.setColor}
);
}
)(jQuery)

CSS代码(colorpicker.css):

@charset "utf-8";/* colorpicker */
.colorpicker{width:356px;height:176px;overflow:hidden;position:absolute;background:url(../images/colorpicker_background.png);font-family:Arial,Helvetica,sans-serif;display:none;}
.colorpicker_color{width:150px;height:150px;left:14px;top:13px;position:absolute;background:#f00;overflow:hidden;cursor:crosshair;}
.colorpicker_color div{position:absolute;top:0;left:0;width:150px;height:150px;background:url(../images/colorpicker_overlay.png);}
.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url(../images/colorpicker_select.png);margin:-5px 0 0 -5px;}
.colorpicker_hue{position:absolute;top:13px;left:171px;width:35px;height:150px;cursor:n-resize;}
.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url(../images/colorpicker_indic.gif) left top;margin:-4px 0 0 0;left:0px;}
.colorpicker_new_color{position:absolute;width:60px;height:30px;left:213px;top:13px;background:#f00;}
.colorpicker_current_color{position:absolute;width:60px;height:30px;left:283px;top:13px;background:#f00;}
.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;font-family:Arial,Helvetica,sans-serif;color:#898989;top:4px;right:11px;text-align:right;margin:0;padding:0;height:11px;}
.colorpicker_hex{position:absolute;width:72px;height:22px;background:url(../images/colorpicker_hex.png) top;left:212px;top:142px;}
.colorpicker_hex input{right:6px;}
.colorpicker_field{height:22px;width:62px;background-position:top;position:absolute;}
.colorpicker_field span{position:absolute;width:12px;height:22px;overflow:hidden;top:0;right:0;cursor:n-resize;}
.colorpicker_rgb_r{background-image:url(../images/colorpicker_rgb_r.png);top:52px;left:212px;}
.colorpicker_rgb_g{background-image:url(../images/colorpicker_rgb_g.png);top:82px;left:212px;}
.colorpicker_rgb_b{background-image:url(../images/colorpicker_rgb_b.png);top:112px;left:212px;}
.colorpicker_hsb_h{background-image:url(../images/colorpicker_hsb_h.png);top:52px;left:282px;}
.colorpicker_hsb_s{background-image:url(../images/colorpicker_hsb_s.png);top:82px;left:282px;}
.colorpicker_hsb_b{background-image:url(../images/colorpicker_hsb_b.png);top:112px;left:282px;}
.colorpicker_submit{position:absolute;width:51px;height:22px;background:url(../images/colorpicker_submit.png) top;left:293px;top:142px;overflow:hidden;cursor:pointer;}
.colorpicker_focus{background-position:center;}
.colorpicker_hex.colorpicker_focus{background-position:bottom;}
.colorpicker_submit.colorpicker_focus{background-position:bottom;}
.colorpicker_slider{background-position:bottom;}
/* colorpicker ie6 hack */
.colorpicker_color div{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/colorpicker_overlay.png',sizingMethod='crop');}
.colorpicker_color div div{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/colorpicker_select.png',sizingMethod='crop');}

附件:下载该文件资源,减少时间成本(增值服务)