javascript写的取色器模块——LeesColorPicker
自己写的取色器，方便缩放，兼容IE和FF
一个项目中要用到取色器，网上现有的取色器要么色彩较少，要么浏览器兼容性不是太好，还有的大小不方便设置。所以，研究了一天的RGB-HSV转换，自己动手写了一个，兼容IE和FireFox（测试浏览器为：IE6、IE7、FireFox3.0.5)
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2
<html xmlns="http://www.w3.org/1999/xhtml" >3
<head>4
<title>Color Picker</title>5
<style type="text/css">
6
#LeesColorPicker7
{}{8
border:solid 1px #888888;9
background-color:#CDCDCD;10
}11
#LeesColorPicker #spliterDiv12
{}{13
margin-right:15px;14
margin-left:15px;15
overflow:hidden;16
cursor:default;17
border:solid 1px #666666;18
}19
#LeesColorPicker #spliterDiv div20
{}{21
overflow:hidden;22
}23
#LeesColorPicker .colormapline24
{}{25
height:1px;26
line-height:1px;27
overflow:hidden;28
}29
#colormapposition30
{}{31
width:17px;32
height:17px;33
position:absolute;34
overflow:hidden;35
z-index:65535;36
}37
#colorpointer38
{}{39
width:5px;40
height:9px;41
position:absolute;42
overflow:hidden;43
z-index:65535;44
}45
</style>46
<script src="/scripts/BrowserVersion.js" type="text/javascript"></script>47
</head>48
<body>49
50
51
<script type="text/javascript" language="javascript">52
var isMSIE=(typeof ActiveXObject != 'undefined');53
54
function IntToHex(dec)55
{56
var result = (parseInt(dec).toString(16));57
if (result.length == 1)58
result = ("0" + result);59
return result.toUpperCase();60
}61
function HexToInt(hex)62
{63
return(parseInt(hex,16));64
}65
function RGB(r,g,b)66
{67
var _this=this;68
_this.r=0;69
_this.g=0;70
_this.b=0;71
_this.h=0;72
_this.s=0;73
_this.v=0;74
_this.HexValue="000000";75
_this.WebColor="#000000";76
function setValue()77
{78
_this.HexValue=""+IntToHex(_this.r)+IntToHex(_this.g)+IntToHex(_this.b);79
_this.WebColor="#"+_this.HexValue;80
81
}82
83
_this.setColorByHSV=function(h,s,v)84
{85
h=h>=360?0:(h<0?0:h);86
//s=s>=100?100:(s<0?0:s);87
//v=v>=100?100:(v<0?0:v);88
s=s<0?0:(s>100?100:s);89
v=v<0?0:(v>100?100:v);90
_this.h=h;91
_this.s=s;92
_this.v=v;93
if (s == 0)94
{95
if (v == 0)96
{97
_this.r = _this.g = _this.b = 0;98
}99
else100
{101
_this.r = _this.g = _this.b = Math.round(v * 2.55 );102
}103
}else if(s==100&&v==100)104
{105
_this.r = _this.g = _this.b = 0;106
if(h<=60){107
_this.r=255;108
_this.g=Math.round(255*h/60);109
}else if(h<=120){110
_this.g=255;111
_this.r=Math.round(255*(120-h)/60);112
}else if(h<=180){113
_this.g=255;114
_this.b=Math.round(255*(h-120)/60);115
}else if(h<=240){116
_this.b=255;117
_this.g=Math.round(255*(240-h)/60);118
}else if(h<=300){119
_this.b=255;120
_this.r=Math.round(255*(h-240)/60);121
}else if(h<360){122
_this.r=255;123
_this.b=Math.round(255*(360-h)/60);124
}125
}126
else127
{128
h /= 60;129
s = s/100;130
v = v/100;131
var i = parseInt(h);132
var f = h - i;133
var p = v * (1 - s);134
var q = v * (1 - (s * f));135
var t = v * (1 - (s * (1 - f)));136
switch (i)137
{138
case 0:139
_this.r = v;140
_this.g = t;141
_this.b = p;142
break;143
case 1:144
_this.r = q;145
_this.g = v;146
_this.b = p;147
break;148
case 2:149
_this.r = p;150
_this.g = v;151
_this.b = t;152
break;153
case 3:154
_this.r = p;155
_this.g = q;156
_this.b = v;157
break;158
case 4:159
_this.r = t;160
_this.g = p;161
_this.b = v;162
break;163
case 5:164
_this.r = v;165
_this.g = p;166
_this.b = q;167
break;168
}//end switch169
170
_this.r = Math.round(_this.r * 255);171
_this.g = Math.round(_this.g * 255);172
_this.b = Math.round(_this.b * 255);173
}//end else174
175
176
setValue();177
}//end function178
179
180
_this.setColorByRGB=function (r,g,b)181
{182
_this.r=r;183
_this.g=g;184
_this.b=b;185
186
r=r>255?1:(r<0?0:r/255);187
g=g>255?1:(g<0?0:g/255);188
b=b>255?1:(b<0?0:b/255);189
190
var hsv = {h:0, s:0, v:0};191
192
var min = 0193
var max = 0;194
195
if (r >= g && r >= b) {196
max = r;197
min = (g > b) ? b : g;198
} else if (g >= b && g >= r) {199
max = g;200
min = (r > b) ? b : r;201
} else {202
max = b;203
min = (g > r) ? r : g;204
}205
206
hsv.v = max;207
hsv.s = (max) ? ((max - min) / max) : 0;208
209
if (!hsv.s) {210
hsv.h = 0;211
} else {212
var delta = max - min;213
if (r == max) {214
hsv.h = (g - b) / delta;215
} else if (g == max) {216
hsv.h = 2 + (b - r) / delta;217
} else {218
hsv.h = 4 + (r - g) / delta;219
}220
221
hsv.h = parseInt(hsv.h * 60);222
if (hsv.h < 0) {223
hsv.h += 360;224
}225
}226
227
hsv.s = parseInt(hsv.s * 100);228
hsv.v = parseInt(hsv.v * 100);229
230
_this.h=hsv.h;231
_this.s=hsv.s;232
_this.v=hsv.v;233
setValue();234
}235
236
_this.setColorByWebColor=function(vValue)237
{238
var oColorParser = document.createElement("body");239
oColorParser.bgColor = vValue;240
var HexColor=oColorParser.bgColor.replace("#","");241
242
var wr, wg, wb;243
244
if (HexColor.length ==3) {245
wr = HexColor.substring(0,1);246
wg = HexColor.substring(1,1);247
wb = HexColor.substring(2,1);248
} else if (HexColor.length ==6){249
wr = HexColor.substring(0,2);250
wg = HexColor.substring(2,4);251
wb = HexColor.substring(4,6);252
} else if (HexColor.toLowerCase().indexOf("rgb")>-1){253
254
HexColor=HexColor.toLowerCase().replace("rgb","").replace("(","").replace(")","").replace(" ","");255
256
var vTs=HexColor.split(",");257
258
if(vTs.length==3)259
{260
wr=vTs[0];261
wg=vTs[1];262
wb=vTs[2];263
_this.setColorByRGB(wr,wg,wb);264
return;265
}266
else267
return;268
}269
else 270
return;271
272
_this.setColorByRGB(HexToInt(wr),HexToInt(wg),HexToInt(wb));273
}274
275
if(r&&g&&b)276
_this.setColorByRGB(r,g,b);277
else if(r)278
_this.setColorByWebColor(r);279
}280
//=======================================================================================================281
//-----Start Class LeesColorPicker------------------------------------------------------------------------------------------------------- 282
//=======================================================================================================283
function LeesColorPicker(w,h,c)284
{285
var _this=this;286
var vBrowser=new Browser();287
_this.PickerString=null;288
_this.RGB=new RGB();289
_this.boxHeight=0;290
_this.boxWidth=0;291
292
if(w<200||!w)293
{294
alert("宽度不能小于200");295
return null;296
}297
if(h<100||!h)298
{299
alert("高度不能小于200");300
return null;301
}302
if(c)303
{304
_this.RGB.setColorByWebColor(c);305
}306
var marginTop=4;307
var marginLeft=4;308
var spliterDivWidth=50-2;309
var infoDivWidth=70-2;310
var normalHeight=h-2-marginTop*2;311
this.boxWidth=w-spliterDivWidth-infoDivWidth-6-marginLeft;312
this.boxHeight=h-2-marginTop*2;313
//var boxLenth=boxWidth<this.boxHeight?boxWidth:this.boxHeight;314
315
//this.boxHeight=normalHeight=boxLenth;316
317
var color_1=new RGB();//new #000000;//用于保存左侧点击选择的颜色；318
color_1.r=this.RGB.r;319
color_1.g=this.RGB.g;320
color_1.b=this.RGB.b;321
color_1.h=this.RGB.h;322
color_1.s=this.RGB.s;323
color_1.v=this.RGB.v;324
var mCurrentSelectedSpliterIndex=1;325
var mSpliterV_Values=new Array();326
mSpliterV_Values[0]=0;327
var colorPickerPointerPosition={x:0,y:0};328
colorPickerPointerPosition.x=this.boxWidth+2+marginLeft+spliterDivWidth-14;329
colorPickerPointerPosition.y=marginTop+2;330
331
var tmpString="";332
var i=0;333
var n=0.0;334
var k=-1;335
336
var m=0;337
var tmpRGB=new RGB();338
tmpRGB.r=this.RGB.r;339
tmpRGB.g=this.RGB.g;340
tmpRGB.b=this.RGB.b;341
tmpRGB.h=this.RGB.h;342
tmpRGB.s=this.RGB.s;343
tmpRGB.v=this.RGB.v;344
345
var isResetingSpliter=false;346
347
var mSpliterDivCount=0;348
349
if(normalHeight>=100)350
{351
mSpliterDivCount=100;352
}353
else354
{355
mSpliterDivCount=normalHeight;356
}357
var mSpliterDivStep=normalHeight/mSpliterDivCount;//平均每个DIV的行高，多半为小数358
function initSpliterDiv()359
{360
var tmpString="";361
var leftDivHeight=normalHeight;362
var spliterDivHeight=1;363
364
var i=1;365
366
367
spliterDivHeight=Math.round(i*mSpliterDivStep)-Math.round((i-1)*mSpliterDivStep);368
leftDivHeight-=spliterDivHeight;369
370
var sEventString1=" onmouseover=\"mouseOverSpliter(event,this);return false;\""371
+" onmousemove=\"mouseMoveSpliter(event,this);return false;\""372
+" onmousedown=\"mouseDownSpliter(event,this);return false;\""373
+" onmouseup=\"mouseUpSpliter(event,this);return false;\""374
+" onclick=\"mouseClickSpliter(event,this)\""375
+" onmouseout=\"mouseOutSpliter(event,this)\"";376
var sEventString2=" onmouseover=\"getSelectedPosition(this);return false;\""/**//*377
+" onmousemove=\"return false;\""378
+" onmousedown=\"return false;\""379
+" onmouseup=\"return false;\""*/380
+" onclick=\"mouseClickSpliter(event,null,this);return false;\""/**//*381
+" onmouseout=\"return false;\"";*/382
tmpString+="<div id=\"L_C_S_DIV_"+i+"\" class=\"spliter\" style=\"height:"+spliterDivHeight+"px;\" "+sEventString2+"></div>";383
384
385
i++;386
for(;i<mSpliterDivCount;i++)387
{388
spliterDivHeight=Math.round(i*mSpliterDivStep)-Math.round((i-1)*mSpliterDivStep);389
leftDivHeight-=spliterDivHeight;390
tmpString+="<div id=\"L_C_S_DIV_"+i+"\" class=\"spliter\" style=\"height:"+spliterDivHeight+"px;\" "+sEventString2+"></div>";391
392
}393
tmpString+="<div id=\"L_C_S_DIV_"+mSpliterDivCount+"\" class=\"spliter\" style=\"height:"+leftDivHeight+"px;\" "+sEventString2+"></div>";394
395
tmpString="<div id=\"spliterDiv\" style=\"height:"+normalHeight+"px;\""+sEventString1+">"+tmpString+"</div>";396
return tmpString;397
}398
this.resetSpliterColor=function(vh,vs,vv)399
{400
isResetingSpliter=true;401
var obj=document.getElementById("Lees_ColorPicker_ColorSpliter");402
if(!obj)403
return;404
var halfHeight=mSpliterDivCount/2;405
var sStep1=vs/(halfHeight-2);406
var vStep1=(100-vv)/(halfHeight-1);407
var sStep2=(100-vs)/halfHeight;408
var vStep2=vv/(halfHeight+1);409
var sN=0;410
var vN=100;411
412
var onlyGray=false;413
if(vs==0)414
{415
sStep1=sStep2=0;416
vStep1=vStep2=100/mSpliterDivCount;417
onlyGray=true;418
}419
420
421
var divheight=0;422
var m=0;423
var tS=0;424
var tV=100;425
var tmpString="";426
var i=0;427
tmpRGB.setColorByHSV(vh,0,100);428
document.getElementById("L_C_S_DIV_1").style.backgroundColor=tmpRGB.WebColor;429
mSpliterV_Values[0]=9999;430
mSpliterV_Values[1]=100;431
for(i=2;i<halfHeight;i++)432
{ 433
sN+=sStep1;434
vN-=vStep1;435
if(Math.round(sN)>tS||Math.round(vN)<tV)436
{437
tS=Math.round(sN);438
tV=Math.round(vN);439
tmpRGB.setColorByHSV(vh,tS,tV);440
}441
try442
{443
mSpliterV_Values[i]=vN;444
document.getElementById("L_C_S_DIV_"+i).style.backgroundColor=tmpRGB.WebColor;445
}446
catch(ex)447
{448
}449
450
}451
if(!onlyGray)452
{453
tmpRGB.setColorByHSV(vh,vs,vv);454
vN-=vStep1;455
mSpliterV_Values[i]=vN;456
document.getElementById("L_C_S_DIV_"+i).style.backgroundColor=tmpRGB.WebColor;457
i++;458
}459
for(;i<mSpliterDivCount;i++)460
{ 461
//sN+=sStep1;462
vN-=vStep2;463
if(Math.round(sN)>tS||Math.round(vN)<tV)464
{465
tS=Math.round(sN);466
tV=Math.round(vN);467
tmpRGB.setColorByHSV(vh,tS,tV);468
}469
try470
{471
mSpliterV_Values[i]=vN;472
document.getElementById("L_C_S_DIV_"+i).style.backgroundColor=tmpRGB.WebColor;473
}474
catch(ex)475
{476
}477
478
}479
tmpRGB.setColorByHSV(vh,100,0);480
mSpliterV_Values[mSpliterDivCount]=0;481
document.getElementById("L_C_S_DIV_"+mSpliterDivCount).style.backgroundColor=tmpRGB.WebColor;482
483
this.setSelectedColor();//------------------------484
isResetingSpliter=false;485
486
487
}488
489
function getMousePosition(event,o)490
{491
var mousePosition={x:0,y:0};492
var top,left,obj;493
obj=o;494
var ParentObj=obj;495
var vBody=vBrowser.isIE?document.documentElement:document.body;496
vBody=document.documentElement;497
left=obj.offsetLeft;498
while(ParentObj=ParentObj.offsetParent){499
left+=ParentObj.offsetLeft;500
}501
mousePosition.x=event.clientX-left+vBody.scrollLeft;502
503
ParentObj=obj;504
top=obj.offsetTop;505
while(ParentObj=ParentObj.offsetParent){506
top+=ParentObj.offsetTop;507
}508
mousePosition.y=event.clientY-top+vBody.scrollTop;509
510
if(vBrowser.isIE)511
{512
mousePosition.x--;513
mousePosition.y--;514
if(vBrowser.Version>6)515
{516
mousePosition.x-=2;517
mousePosition.y-=2;518
}519
}520
else521
{522
mousePosition.x++;523
mousePosition.y++;524
}525
var thisWidth=o.clientWidth;526
var thisHeight=o.clientHeight;527
if(mousePosition.x<0)528
mousePosition.x=0;529
if(mousePosition.y<0)530
mousePosition.y=0;531
532
if(mousePosition.x>thisWidth)533
mousePosition.x=thisWidth;534
if(mousePosition.y>thisHeight)535
mousePosition.y=thisHeight;536
537
return mousePosition;538
}539
this.moveSelectCircleToPoint=function(t,o)540
{ 541
o.style.top=t.y+"px";542
o.style.left=t.x+"px"; 543
}544
545
var isMouseDownColorMap=false;546
var isMouseOutColorMapDiv=true;547
548
var h_lineWidth=360/this.boxWidth;549
var s_lineWidth=100/this.boxHeight;550
var v_lineWidth=100/this.boxHeight;551
this.mouseOverColorMap=function(event,o)552
{553
isMouseOutColorMapDiv=false;554
}555
this.mouseMoveColorMap=function(event,o)556
{557
if(isMouseOutColorMapDiv)558
return;559
if(isResetingSpliter)560
return;561
var t=getMousePosition(event,o)562
563
if(isMouseDownColorMap)564
{565
var obj=document.getElementById("colormapposition");566
var tt={x:0,y:0};567
tt.x=t.x-7+marginLeft+((vBrowser.isIE&&vBrowser.Version>6)?-1:0);568
tt.y=t.y-7+marginTop;569
this.moveSelectCircleToPoint(tt,obj);570
var vh=Math.round(t.x*h_lineWidth);571
var vs=Math.round(100-t.y*s_lineWidth);572
var vv=Math.round(100-t.y*v_lineWidth);573
574
575
this.RGB.setColorByHSV(vh,vs,vv);576
color_1.setColorByHSV(vh,vs,vv);577
this.resetSpliterColor(vh,vs,vv); 578
}579
580
if(isMSIE)581
o.clientWidth;//IE BUG---------如果不调用这个东西，反应特慢，随便调用一下就快多了；582
}583
this.mouseDownColorMap=function(event,o)584
{585
isMouseDownColorMap=true;586
document.getElementById("colormapposition").style.display="none";587
}588
this.mouseUpColorMap=function()589
{590
isMouseDownColorMap=false;591
isMouseDownColorMap=false;592
document.getElementById("colormapposition").style.display="";593
_this.resetSpliterColor(color_1.h,color_1.s,color_1.v);594
}595
this.mouseClickColorMap=function(event,o)596
{597
var t=getMousePosition(event,o)598
599
o.clientWidth;600
601
var vh=Math.round(t.x*h_lineWidth);602
var vs=Math.round(100-t.y*s_lineWidth);603
var vv=Math.round(100-t.y*v_lineWidth);604
605
color_1.setColorByHSV(vh,vs,vv);606
607
var obj=document.getElementById("colormapposition");608
var tt={x:0,y:0};609
610
tt.x=t.x-7+marginLeft+((vBrowser.isIE&&vBrowser.Version>6)?-1:0);611
tt.y=t.y-7+marginTop;612
this.moveSelectCircleToPoint(tt,obj);613
}614
this.mouseOutColorMap=function(event,o)615
{616
if(!vBrowser.isIE)617
{618
isMouseOutColorMapDiv=true;619
isMouseDownColorMap=false;620
}621
document.getElementById("colormapposition").style.display="";622
623
_this.resetSpliterColor(color_1.h,color_1.s,color_1.v);624
}625
626
var isMouseDownSpliter=false;627
var isMouseOutSpliter=true;628
629
this.getSelectColor=function()630
{631
var vPreviewColor=document.getElementById("LeesColorPicker_PreviewColor");632
if(!vPreviewColor)633
return;634
635
this.RGB.setColorByWebColor(vPreviewColor.style.backgroundColor);636
637
638
//vPreviewColor.style.backgroundColor=vSelectColor.WebColor;639
640
document.getElementById("L_C_P_C_H").innerHTML=this.RGB.h;641
document.getElementById("L_C_P_C_S").innerHTML=this.RGB.s;642
document.getElementById("L_C_P_C_V").innerHTML=this.RGB.v;643
document.getElementById("L_C_P_C_R").innerHTML=this.RGB.r;644
document.getElementById("L_C_P_C_G").innerHTML=this.RGB.g;645
document.getElementById("L_C_P_C_B").innerHTML=this.RGB.b;646
document.getElementById("L_C_P_C_VALUE").value=this.RGB.HexValue;647
648
return this.RGB.HexValue;649
}650
this.setSelectedColor=function()651
{652
var vPreviewColor=document.getElementById("LeesColorPicker_PreviewColor");653
if(!vPreviewColor)654
return;655
var o=document.getElementById("L_C_S_DIV_"+mCurrentSelectedSpliterIndex);656
if(o)657
{658
vPreviewColor.style.backgroundColor=o.style.backgroundColor;659
this.getSelectColor();660
}661
662
}663
this.moveColorPointer=function(tt,o)664
{665
var obj=document.getElementById("colorpointer");666
667
colorPickerPointerPosition.y=tt.y+marginTop;668
tt.x=colorPickerPointerPosition.x;669
tt.y=colorPickerPointerPosition.y-3;670
this.moveSelectCircleToPoint(tt,obj);671
this.setSelectedColor();672
673
}674
675
this.getSelectedPosition=function(o)676
{677
if(!isMouseDownSpliter)678
return;679
var reg=new RegExp("L_C_S_DIV_","gi");680
mCurrentSelectedSpliterIndex=o.id.replace(reg,"");681
682
}683
this.mouseOverSpliter=function(event,o)684
{685
isMouseOutSpliter=false;686
}687
this.mouseMoveSpliter=function(event,o)688
{689
if(!isMouseDownSpliter)690
return;691
var t=getMousePosition(event,o);692
this.moveColorPointer(t,o);693
}694
this.mouseDownSpliter=function(event,o)695
{696
isMouseDownSpliter=true;697
}698
this.mouseUpSpliter=function(event,o)699
{700
isMouseDownSpliter=false;701
}702
this.mouseClickSpliter=function(event,o,obj)703
{704
if(obj)705
{706
var reg=new RegExp("L_C_S_DIV_","gi");707
mCurrentSelectedSpliterIndex=obj.id.replace(reg,"");708
return;709
}710
var t=getMousePosition(event,o);711
this.moveColorPointer(t,o);712
}713
this.mouseOutSpliter=function(event,o)714
{715
var t=getMousePosition(event,o);716
717
if(t.x>0&&t.x<o.clientWidth&&t.y>0&&t.y<o.clientHeight)718
return;719
if(!vBrowser.isIE)720
{721
isMouseOutSpliter=true;722
isMouseDownSpliter=false; 723
}724
}725
function findIndexInSpliters(s,e,v)726
{727
var m=parseInt((s+e)/2);728
if(m==s)729
{730
//window.status="s="+s+"e="+e+"v="+v+"----mSpliterV_Values[s]="+mSpliterV_Values[s]+"-----mSpliterV_Values[e]="+mSpliterV_Values[e];731
if(Math.abs(v-mSpliterV_Values[s])<Math.abs(v-mSpliterV_Values[e]))732
return s;733
else734
return e; 735
}736
if(v>mSpliterV_Values[m])737
{738
return findIndexInSpliters(s,m,v); 739
}740
else if(v<mSpliterV_Values[m])741
{742
return findIndexInSpliters(m,e,v);743
}744
else745
return m;746
}747
this.initColor=function(c)748
{749
this.RGB.setColorByWebColor(c);750
var vh=this.RGB.h;751
var vs=this.RGB.s;752
var vv=this.RGB.v;753
color_1.h=vh;754
color_1.s=vs;755
color_1.v=vs;756
var t={x:0,y:0};757
t.x=vh/h_lineWidth;758
t.y=(100-vs)/s_lineWidth;759
var vz=(100-vv)/s_lineWidth;760
761
var obj=document.getElementById("colormapposition");762
var tt={x:0,y:0};763
tt.x=t.x-7+marginLeft+((vBrowser.isIE&&vBrowser.Version>6)?-1:0);764
tt.y=t.y-7+marginTop;765
this.moveSelectCircleToPoint(tt,obj); 766
767
768
769
this.resetSpliterColor(vh,vs,vs); 770
771
mCurrentSelectedSpliterIndex=findIndexInSpliters(1,mSpliterDivCount,vv);772
773
colorPickerPointerPosition.y=marginTop-4;774
for(var i=1;i<mCurrentSelectedSpliterIndex;i++)775
{776
var oo=document.getElementById("L_C_S_DIV_"+i);777
colorPickerPointerPosition.y+=oo.clientHeight;778
}779
780
var obj=document.getElementById("colorpointer");781
this.moveColorPointer(colorPickerPointerPosition,obj);782
783
}784
785
this.validColorInput=function(event)786
{787
var e = event || window.event; 788
var code = e.charCode || e.keyCode; 789
var inputChar=String.fromCharCode(code).toUpperCase();790
var validChars="0123456789ABCDEF";791
if(validChars.indexOf(inputChar)<0)792
return false;793
}794
this.validColorValue=function(o)795
{796
o.value=o.value.replace(/[^0-9a-f]/gi,"").toUpperCase();797
return (o.value==o.value&&o.value.length==6); 798
}799
this.loadColorMap=function()800
{801
var o=document.getElementById("Lees_ColorMapBox");802
o.innerHTML="<img src=\"/images/colormap.png\" alt=\"\" style=\"cursor:url(/images/colorpicker.cur),auto;width:"+this.boxWidth+"px;height:"+this.boxHeight+"px;\""803
+" onmouseover=\"mouseOverColorMap(event,this);return false;\""804
+" onmousemove=\"mouseMoveColorMap(event,this);return false;\""805
+" onmousedown=\"mouseDownColorMap(event,this);return false;\""806
+" onmouseup=\"mouseUpColorMap(event,this);return false;\""807
+" onclick=\"mouseClickColorMap(event,this)\""808
+" onmouseout=\"mouseOutColorMap(event,this)\" GALLERYIMG=\"no\"/>";809
//_this.resetSpliterColor(color_1.h,color_1.s,color_1.v);810
this.initColor(this.RGB.WebColor);811
}812
813
814
var spliterString="<div style=\"width:"+spliterDivWidth+"px;height:"+normalHeight+"px;clear:none;float:left;margin-top:"+marginTop+"px;\" id=\"Lees_ColorPicker_ColorSpliter\">"815
+initSpliterDiv()816
+"<img id=\"colorpointer\" src=\"/images/colorpointer.gif\" alt=\"\" style=\"top:"+(colorPickerPointerPosition.y-4)+"px;left:"+colorPickerPointerPosition.x +"px;\" onmousemove=\"return false\" onmousedown=\"return false\" GALLERYIMG=\"no\"/>"817
+"</div>";818
var mapBoxString="<div style=\"width:"+this.boxWidth+"px;height:"+this.boxHeight+"px;clear:none;float:left;margin-top:"+marginTop+"px;margin-left:"+(vBrowser.isIE?marginLeft-2:marginLeft)+"px;border:solid 1px #666666;overflow:hidden;background-color:Red;\" id=\"Lees_ColorMapBox\">"819
+""820
+"</div>";821
var infoString="<div style=\"width:60px;height:"+normalHeight+"px;clear:none;float:left;margin-top:"+marginTop+"px;margin-left:5px;font-size:13px;\">"822
+"<div style=\"height:6px;line-height:6px;overflow:hidden\"></div>"823
+"<div id=\"LeesColorPicker_PreviewColor\" style=\"height:68px;\"></div>"824
+"<div style=\"height:6px;line-height:6px;overflow:hidden\"></div>"825
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_H\"></div><div style=\"margin-right:40px;text-indent:5px;\">H:</div>"826
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_S\"></div><div style=\"margin-right:40px;text-indent:5px;\">S:</div>"827
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_V\"></div><div style=\"margin-right:40px;text-indent:5px;\">V:</div>"828
+"<div style=\"height:3px;line-height:3px;overflow:hidden\"></div>"829
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_R\"></div><div style=\"margin-right:40px;text-indent:5px;\">R:</div>"830
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_G\"></div><div style=\"margin-right:40px;text-indent:5px;\">G:</div>"831
+"<div style=\"width:35px;float:right;\" id=\"L_C_P_C_B\"></div><div style=\"margin-right:40px;text-indent:5px;\">B:</div>"832
+"<div style=\"height:6px;line-height:6px;overflow:hidden\"></div>"833
+"#<input type=\"text\" id=\"L_C_P_C_VALUE\" style=\"width:48px;border:solid 1px #1989E1;font-family:arial;font-size:12px;\" maxlength=\"6\" onkeypress=\"return validColorInput(event);\" onchange=\"validColorValue(this);\">"834
+""835
+"</div>";836
837
_this.PickerString="<div style=\"width:"+w+"px;height:"+h+"px;\" id=\"LeesColorPicker\">"838
+ mapBoxString839
+ spliterString840
+ infoString841
+"</div>"842
+"<img id=\"colormapposition\" src=\"/images/colormappositin.gif\" alt=\"\" style=\"top:0;left:0;\" onmousemove=\"return false\" onmousedown=\"return false\" GALLERYIMG=\"no\"/>";843
}844
845
846
847
848
</script>849
850
851
<script language="javascript" type="text/javascript">852
function mouseOverColorMap(event,o)853
{854
vLeesColorPicker.mouseOverColorMap(event,o);855
}856
function mouseMoveColorMap(event,o)857
{858
vLeesColorPicker.mouseMoveColorMap(event,o);859
} 860
function mouseDownColorMap(event,o)861
{862
vLeesColorPicker.mouseDownColorMap(event,o);863
}864
function mouseUpColorMap(event,o)865
{866
vLeesColorPicker.mouseUpColorMap(event,o);867
}868
function mouseClickColorMap(event,o)869
{870
871
vLeesColorPicker.mouseClickColorMap(event,o);872
}873
function mouseOutColorMap(event,o)874
{875
vLeesColorPicker.mouseOutColorMap(event,o);876
}877
878
function mouseOverSpliter(event,o)879
{880
vLeesColorPicker.mouseOverSpliter(event,o);881
}882
function mouseMoveSpliter(event,o)883
{884
vLeesColorPicker.mouseMoveSpliter(event,o);885
}886
function mouseDownSpliter(event,o)887
{888
vLeesColorPicker.mouseDownSpliter(event,o);889
}890
function mouseUpSpliter(event,o)891
{892
vLeesColorPicker.mouseUpSpliter(event,o);893
}894
function mouseClickSpliter(event,o,obj)895
{896
vLeesColorPicker.mouseClickSpliter(event,o,obj);897
}898
function mouseOutSpliter(event,o)899
{900
vLeesColorPicker.mouseOutSpliter(event,o);901
}902
function getSelectedPosition(o)903
{904
vLeesColorPicker.getSelectedPosition(o);905
}906
907
function validColorInput(event)908
{909
vLeesColorPicker.validColorInput(event);910
}911
function validColorValue(o)912
{913
if(vLeesColorPicker.validColorValue(o))914
vLeesColorPicker.initColor(o.value);915
}916
</script>917
<div style="width:500px;height:500px;position:absolute;top:100px;left:200px;" id="colordiv">918
</div>919
<script language="javascript" type="text/javascript">920
921
var vLeesColorPicker=new LeesColorPicker(580,480,"gray");//宽、高、初始颜色922
document.getElementById("colordiv").innerHTML=vLeesColorPicker.PickerString;923
vLeesColorPicker.loadColorMap();924
925
</script>926
927
</body>928
</html>
注：颜色的取得与设置均为公式计算所得，由于计算精度问题所以存在一定的数值误差。但对于眼睛来说，所产生的“色差”是难以分辨的，也是完全可以接受的。
