Shake_JS选色器 - 王朝网络

可能大家还对颜色的选取还很烦恼.

可是,圣诞节期间.一个新的颜色选择控件已经出场,

它,包含了仿window默认取色器,PS的条型选色器,PS的拾色器,CorelDraw的色环选色器,和很多图像编辑软件通用的基本颜色选色器于一身的,Shake_JS选色器.

下载地址: http://inshake.ik8.com/inshake/shake_js.rar

压缩包包括2个文件(test.htm 和 Color.htm)：

test.htm 代码如下：

<html>

<head>

</head>

function ChangeColor(){

var myColor = window.showModalDialog('Color.htm',"ColorWin",'dialogWidth:508px;dialogHeight:412px;status:no');

//变量名自己改myColor 等号后面的就是调用语句.

document.getElementById('Ctextabcdefg').style.color = myColor;

}

</script>

<body>

<p><span id="Ctextabcdefg">改变我的颜色吧,看看效果,<br/>PowerBy:动感Shake<br/>基本原则嫪人侃</span></p>

</body>

</html>

Color.htm 代码如下：

<html>

<head>

<title>Shake-JS取色控件</title>

<!--

.TitleSelect {

cursor:default;

font-size: 12px;

color: #000000;

text-decoration: none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #666666;

border-right-color: #666666;

border-bottom-color: #EFEBDE;

border-left-color: #666666;

}

.TitleNoSelect {

cursor:default;

font-size: 12px;

color: #999999;

text-decoration: none;

border: 1px solid #666666;

}

.ColorFoot {

cursor:default;

font-size: 12px;

text-decoration: none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-right-color: #666666;

border-bottom-color: #666666;

border-left-color: #666666;

border-top-color: #EFEBDE;

}

.ColorBody {

font-size: 12px;

text-decoration: none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #EFEBDE;

border-right-color: #666666;

border-bottom-color: #EFEBDE;

border-left-color: #666666;

}

.CustomerText {

font-size: 12px;

color: #000000;

text-decoration: none;

}

.TCBox {

font-size: 12px;

text-decoration: none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #666666;

border-right-color: #EFEBDE;

border-bottom-color: #EFEBDE;

border-left-color: #666666;

}

.Img1px {

font-size: 1px;

text-decoration: none;

}

.Buttons {

width:90%;

height:30px;

font-size: 12px;

text-decoration: none;

background-color: #EFEBDE;

border: 1px solid #666666;

}

.TCBoxSelect {

font-size: 12px;

text-decoration: none;

border: 1px groove #333333;

}

-->

</style>

</head>

var cMode = 1; //当前模式

function TitleOnChange(){

document.getElementById('ColorTitle_'+cMode).className = 'TitleNoSelect';

document.getElementById('Title'+cMode).style.display = 'none';

var CurSelect = event.srcElement;

cMode = CurSelect.id.substring(CurSelect.id.length - 1);

CurSelect.className = 'TitleSelect';

document.getElementById('Title'+cMode).style.display = 'block';

if(cMode != 6){

eval('WinReturnValue.value = Color'+cMode+'HTML.value;');

addButton.disabled = false;

}else{

WinReturnValue.value = "";

addButton.disabled = true;

}

delete CurSelect;

}

function RGBtoHTML(R,G,B){

R = parseInt(R);

G = parseInt(G);

B = parseInt(B);

var r=(R>=16)?R.toString(16):('0'+R.toString(16));

var g=(G>=16)?G.toString(16):('0'+G.toString(16));

var b=(B>=16)?B.toString(16):('0'+B.toString(16));

delete R,G,B;

return('#'+r.toUpperCase()+g.toUpperCase()+b.toUpperCase());

}

function HSVtoRGB(H,S,V,T){

if(T){

H = parseInt(H);

S = parseInt(S) / 100;

V = parseInt(V) / 100;

}

var r,g,b;

var k = (H%60)/60;

var c1 = V*(1-S);

var c2 = V*(1-S*k);

var c3 = V*(1-S*(1-k));

switch(parseInt(H/60)){

case 0 : r=V,g=c3;b=c1; break;

case 1 : r=c2,g=V;b=c1; break;

case 2 : r=c1,g=V;b=c3; break;

case 3 : r=c1,g=c2;b=V; break;

case 4 : r=c3,g=c1;b=V; break;

case 5 : r=V,g=c1;b=c2; break;

}

R = parseInt(r*255);

G = parseInt(g*255);

B = parseInt(b*255);

var rl = new Array(R,G,B);

delete H,S,V,r,g,b,k,c1,c2,c3,R,G,B,T;

return(rl);

}

function NumToDec(aValue, fromBase)

{

var aNum = 0;

var curNum = 0;

var i = 0;

var s = aValue;

var c = aValue.substr(0,1);

var SignChanged = false;

if (c == "-")

{

s = aValue.substr(1, aValue.length -1);

SignChanged = true;

}

for (i = 0; i < s.length; i++)

{

c = s.substr(i,1);

switch (c.toLowerCase())

{

case "a" :

curNum = 10;

break;

case "b" :

curNum = 11;

break;

case "c" :

curNum = 12;

break;

case "d" :

curNum = 13;

break;

case "e" :

curNum = 14;

break;

case "f" :

curNum = 15;

break;

default :

curNum = eval(s.substr(i,1));

}

aNum = aNum * fromBase + curNum;

}

if (SignChanged == true) aNum = aNum * -1;

delete fromBase,curNum,i,s,c,SignChanged;

return aNum;

}

function CustomerColorSelect(){

CustomerColor.rows[parseInt(CustomerColorSelRow.value)-1].cells[parseInt(CustomerColorSelCell.value)-1].className = 'TCBox';

var e = event.srcElement;

var R = e.parentNode.rowIndex + 1;

var C = e.cellIndex + 1;

e.className = 'TCBoxSelect';

CustomerColorSelRow.value = R;

CustomerColorSelCell.value = C;

WinReturnValue.value = e.bgColor;

delete e,R,C;

}

function addCustomerColor(){

var CBox = CustomerColor.rows[parseInt(CustomerColorSelRow.value)-1].cells[parseInt(CustomerColorSelCell.value)-1];

eval('CBox.bgColor = Color'+cMode+'HTML.value;');

delete CBox;

}

//====[七彩板]

function drawColorMain(){

var CX = 15;

var CY = 38;

var ColorMainLayer = '';

var SevenColor = new Array('255,0,0','255,255,0','0,255,0','0,255,255','0,0,255','255,0,255','255,0,0');

for(var i = 0 ; i < 6 ; i++){

ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px;height:240px; background:rgb('+SevenColor[i]+')"></span><span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px; height:240px; background:rgb('+SevenColor[i+1]+'); filter:alpha(opacity=0,finishopacity=100,style=1);"></span>';

document.write(ColorMainLayer);

}

ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ CX +'px; top:'+ CY +'px; width:300px; height:240px; background:rgb(153,153,153); filter:alpha(startX=0,finishX=0,startY=0,finishY=100,opacity=0,finishopacity=100,style=1);" onClick="Color1Picker()" onMouseMove="Color1Mover();if(event.button == 1){Color1Picker();}"></span>';

document.write(ColorMainLayer);

delete SevenColor,i,CX,CY,ColorMainLayer;

}

function Color1Mover(){

var eX = event.offsetX;

var eY = event.offsetY;

//色调最大值为360,选色框宽为300

eX = parseInt(eX * 360 / 300) + 1;

//饱和度最大值为100,选色框高为240

eY = 100 * eY / 240;

var ColorCist = HSVtoRGB(eX,1-eY/100,1-eY/200,false);

xColor1.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';

delete eX,eY,ColorCist;

}

function Color1Picker(){

Color1_Expler.style.top = '150px';

var eX = event.offsetX;

var eY = event.offsetY;

//色调最大值为360,选色框宽为300

eX = parseInt(eX * 360 / 300) + 1;

//饱和度最大值为100,选色框高为240

eY = 100 * eY / 240;

//H 0-360 S 0.5-0 V 2-0

var ColorCist = HSVtoRGB(eX,1-eY/100,1-eY/200,false);

V1_Line.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';

H1.value = eX;

S1.value = parseInt(240 - eY * 240 / 100);

V1.value = Color1V.value;

R1.value = ColorCist[0];

G1.value = ColorCist[1];

B1.value = ColorCist[2];

xColor2.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';

Color1HTML.value = RGBtoHTML(ColorCist[0],ColorCist[1],ColorCist[2]);

WinReturnValue.value = Color1HTML.value;

delete eX,eY,ColorCist;

}

function Color1_LinePicker(Ev){

var eY = event.y;

V1.value = 240 - (eY - 41);

Color1V.value = 240 - (eY - 41);

Color1_Expler.style.top = eY - 8 + 'px';

var H = parseInt(H1.value)-5;

var S = (1 - (240 - parseInt(S1.value)) / 240) / 2;

if(S1.value<=120){

var V = (240 - parseInt(event.offsetY)) / 240;

}else{

var V = (2 - parseInt(event.offsetY + 10) / 120);

}

var ColorCist = HSVtoRGB(H,S,V,false);

if(ColorCist[0]>255)

ColorCist[0]=255;

else if(ColorCist[0]<0)

ColorCist[0]=0;

if(ColorCist[1]>255)

ColorCist[1]=255;

else if(ColorCist[1]<0)

ColorCist[1]=0;

if(ColorCist[2]>255)

ColorCist[2]=255;

else if(ColorCist[2]<0)

ColorCist[2]=0;

R1.value = ColorCist[0];

G1.value = ColorCist[1];

B1.value = ColorCist[2];

if(Ev){

xColor1.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';

}

xColor2.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';

Color1HTML.value = RGBtoHTML(ColorCist[0],ColorCist[1],ColorCist[2]);

WinReturnValue.value = Color1HTML.value;

delete ColorCist,H,S,V,eY,Ev;

}

//==[颜色条]

function drawColorLine(){

var CX = 50;

var CY = 180;

var ColorMainLayer = '';

var SevenColor = new Array('255,0,0','255,255,0','0,255,0','0,255,255','0,0,255','255,0,255','255,0,0');

for(var i = 0 ; i < 6 ; i++){

ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px;height:100px; background:rgb('+SevenColor[i]+')"></span><span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px; height:100px; background:rgb('+SevenColor[i+1]+'); filter:alpha(opacity=0,finishopacity=100,style=1);"></span>';

document.write(ColorMainLayer);

}

ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+CY+'px; width:300px; height:50px; background:rgb(255,255,255); filter:alpha(opacity=100,finishopacity=0,startX=0,startY=0,finishX=0,finishY=100,style=1)"></span><span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+(50+CY)+'px; width:300px; height:50px; background:rgb(0,0,0); filter:alpha(opacity=0,finishopacity=100,startX=0,startY=0,finishX=0,finishY=100,style=1)"></span><span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+CY+'px; width:300px; height:100px;" onmouseup="ePickColor(true);" onmousemove="ePickColor(false);if(event.button==1) ePickColor(true);"></span>';

document.write(ColorMainLayer);

delete CX,CY,ColorMainLayer,SevenColor,i;

}

function eChangeR(w,t){

var k = new Array();

switch(w){

case 1:

var Rd = parseInt(event.offsetX * 256 / 300);

eColor1.style.background = 'rgb('+Rd+','+G2.value+','+B2.value+')';

if(t){

R2.value = Rd;

Rj.style.left = event.x - 8;

Rj.innerText = '∧' + R2.value;

eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';

eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';

eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';

eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';

eColor2.style.background = 'rgb('+Rd+','+G2.value+','+B2.value+')';

Rd = Rd>=10?Rd.toString(16).toUpperCase():'0'+Rd;

k[0] = G2.value>=10?parseInt(G2.value).toString(16).toUpperCase():'0'+G2.value;

k[1] = B2.value>=10?parseInt(B2.value).toString(16).toUpperCase():'0'+B2.value;

Color2HTML.value = '#'+Rd+k[0]+k[1];

WinReturnValue.value = Color2HTML.value;

}

delete Rd;

break;

case 2:

var Gd = parseInt(event.offsetX * 256 / 300);

eColor1.style.background = 'rgb('+R2.value+','+Gd+','+B2.value+')';

if(t){

G2.value = Gd;

Gj.style.left = event.x - 8;

Gj.innerText = '∧' + G2.value;

eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';

eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';

eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';

eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';

eColor2.style.background = 'rgb('+R2.value+','+Gd+','+B2.value+')';

Gd = Gd>=10?Gd.toString(16).toUpperCase():'0'+Gd;

k[0] = R2.value>=10?parseInt(R2.value).toString(16).toUpperCase():'0'+R2.value;

k[1] = B2.value>=10?parseInt(B2.value).toString(16).toUpperCase():'0'+B2.value;

Color2HTML.value = '#'+k[0]+Gd+k[1];

WinReturnValue.value = Color2HTML.value;

}

delete Gd;

break;

case 3:

var Bd = parseInt(event.offsetX * 256 / 300);

eColor1.style.background = 'rgb('+R2.value+','+B2.value+','+Bd+')';

if(t){

B2.value = Bd;

Bj.style.left = event.x - 8;

Bj.innerText = '∧' + B2.value;

eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';

eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';

eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';

eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';

eColor2.style.background = 'rgb('+R2.value+','+B2.value+','+Bd+')';

Bd = Bd>=10?Bd.toString(16).toUpperCase():'0'+Bd;

k[0] = R2.value>=10?parseInt(R2.value).toString(16).toUpperCase():'0'+R2.value;

k[1] = G2.value>=10?parseInt(G2.value).toString(16).toUpperCase():'0'+G2.value;

Color2HTML.value = '#'+k[0]+k[1]+Bd;

WinReturnValue.value = Color2HTML.value;

}

delete Bd;

break;

}

delete w,t,k;

}

function ePickColor(w){

var pX = event.offsetX;

var pY = event.offsetY;

var HalfH = 50;

H = parseInt(pX*360/300);

if(event.offsetY < HalfH){

S = pY/HalfH;

V = 1;

}

else{

S = 1;

V = (100-pY)/HalfH;

}

var t = HSVtoRGB(H, parseInt(S*100), parseInt(V*100),true);

eColor1.style.background = 'rgb('+t[0]+','+t[1]+','+t[2]+')';

if(w){

Rj.style.left = 43 + parseInt(t[0] * 300 / 255);

Rj.innerText = '∧' + t[0];

Gj.style.left = 43 + parseInt(t[1] * 300 / 255);

Gj.innerText = '∧' + t[1];

Bj.style.left = 43 + parseInt(t[2] * 300 / 255);

Bj.innerText = '∧' + t[2];