|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 JS 高仿真的拾色器 多浏览器支持.
[html]function ColorTable(instance){
this.Instance = new String(instance);
this.Color = "#000000";
this.Callback = null;
var flag = -1;
var PreviewCellID = Global.GetUniqueID();
var RGBID = Global.GetUniqueID();
var LayerID = Global.GetUniqueID();
var Colors = "#000000,#000000,#000000,#000000,#003300,#006600,#009900,#00cc00,#00ff00,#330000,#333300,#336600,#339900,#33cc00,#33ff00,#660000,#663300,#666600,#669900,#66cc00,#66ff00,#000000,#333333,#000000,#000033,#003333,#006633,#009933,#00cc33,#00ff33,#330033,#333333,#336633,#339933,#33cc33,#33ff33,#660033,#663333,#666633,#669933,#66cc33,#66ff33,#000000,#666666,#000000,#000066,#003366,#006666,#009966,#00cc66,#00ff66,#330066,#333366,#336666,#339966,#33cc66,#33ff66,#660066,#663366,#666666,#669966,#66cc66,#66ff66,#000000,#999999,#000000,#000099,#003399,#006699,#009999,#00cc99,#00ff99,#330099,#333399,#336699,#339999,#33cc99,#33ff99,#660099,#663399,#666699,#669999,#66cc99,#66ff99,#000000,#cccccc,#000000,#0000cc,#0033cc,#0066cc,#0099cc,#00cccc,#00ffcc,#3300cc,#3333cc,#3366cc,#3399cc,#33cccc,#33ffcc,#6600cc,#6633cc,#6666cc,#6699cc,#66cccc,#66ffcc,#000000,#ffffff,#000000,#0000ff,#0033ff,#0066ff,#0099ff,#00ccff,#00ffff,#3300ff,#3333ff,#3366ff,#3399ff,#33ccff,#33ffff,#6600ff,#6633ff,#6666ff,#6699ff,#66ccff,#66ffff,#000000,#ff0000,#000000,#990000,#993300,#996600,#999900,#99cc00,#99ff00,#cc0000,#cc3300,#cc6600,#cc9900,#cccc00,#ccff00,#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00,#000000,#00ff00,#000000,#990033,#993333,#996633,#999933,#99cc33,#99ff33,#cc0033,#cc3333,#cc6633,#cc9933,#cccc33,#ccff33,#ff0033,#ff3333,#ff6633,#ff9933,#ffcc33,#ffff33,#000000,#0000ff,#000000,#990066,#993366,#996666,#999966,#99cc66,#99ff66,#cc0066,#cc3366,#cc6666,#cc9966,#cccc66,#ccff66,#ff0066,#ff3366,#ff6666,#ff9966,#ffcc66,#ffff66,#000000,#ffff00,#000000,#990099,#993399,#996699,#999999,#99cc99,#99ff99,#cc0099,#cc3399,#cc6699,#cc9999,#cccc99,#ccff99,#ff0099,#ff3399,#ff6699,#ff9999,#ffcc99,#ffff99,#000000,#00ffff,#000000,#9900cc,#9933cc,#9966cc,#9999cc,#99cccc,#99ffcc,#cc00cc,#cc33cc,#cc66cc,#cc99cc,#cccccc,#ccffcc,#ff00cc,#ff33cc,#ff66cc,#ff99cc,#ffcccc,#ffffcc,#000000,#ff00ff,#000000,#9900ff,#9933ff,#9966ff,#9999ff,#99ccff,#99ffff,#cc00ff,#cc33ff,#cc66ff,#cc99ff,#ccccff,#ccffff,#ff00ff,#ff33ff,#ff66ff,#ff99ff,#ffccff,#ffffff".split(",");
this.ShowTable = function(callBack,x,y){
if(flag != 1){
return;
}
if("function" != typeof(callBack)) return;
this.Callback = callBack;
document.getElementById(LayerID).style.display = "";
document.getElementById(LayerID).style.top = parseInt(y,10);
document.getElementById(LayerID).style.left = parseInt(x,10);
}
this.Init = function(){
if(flag != (-1)){
return;
}
if(window[this.Instance] != this){
throw new Error(-1,"");
}
flag = 0;
}
this.SetColor = function(color){
if(flag != 1){
return;
}
this.Color = new String(color).toUpperCase();
document.getElementById(PreviewCellID).style.backgroundColor = this.Color;
document.getElementById(RGBID).innerHTML = this.Color;
}
this.Select = function(color){
if(flag != 1){
return;
}
this.Color = new String(color).toUpperCase();
if("function" == typeof(this.Callback))
this.Callback(this.Color);
this.Hide();
}
this.Draw = function(){
if(flag == (-1)){
this.Init();
}
if(flag != 0){
return ;
}
var shtml = "";
shtml += '<div id="' + LayerID + '" style="position:absolute;display:none;top:0px;left:0px;width:214px;height:145px;overflow:visible;border:0px;z-index:999999;">';
shtml += this.GetTable();
shtml += '</div>';
document.write(shtml);
flag = 1;
}
this.Hide = function(){
if(flag != 1){
return;
}
document.getElementById(LayerID).style.display = "none";
}
this.GetTable = function(){
var shtml = '\
<table width="214" onmousedown="event.cancelBubble=true;" height="145" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000">\n\
<tr>\n\
<td height="20" bgcolor="#D4D0C8" scope="col"><table width="100%" style="margin:2px;" border="0" cellspacing="0" cellpadding="0">\n\
<tr>\n\
<td width="24%" height="20" style="background-color:#ffffff;border:solid 1px #000000" scope="col" id="' + PreviewCellID + '"> </td>\n\
<td width="43%" height="20" scope="col"><div align="center" style="font-family:宋体;font-size:9pt;" id="' + RGBID + '"></div></td>\n\
<td width="33%" height="20" scope="col"><div align="center"></div></td>\n\
</tr>\n\
</table></td>\n\
</tr>\n\
<tr>\n\
<td>';
shtml += '<table border="0" cellspacing="1" bgcolor="#000000">';
shtml += '<tr height="10">';
for(var i=0,l=Colors.length;i<l;i++){
if(i%21 == 0){
shtml += "</tr><tr>";
}
shtml += '<td height="10" width="10" bgcolor="' + Colors[i] + '" style="cursor:hand;" onmouseover="' + this.Instance + '.SetColor(bgColor)" onmousedown="' + this.Instance + '.Select(bgColor)"></td>';
}
shtml += '</table>';
shtml += ' </td>\n\
</tr>\n\
</table>';
return shtml;
}
}[/html]
调用方法：
[code]
<script language="javascript">
function _callback(_color){
alert(_color);
}
var colorTable = new ColorTable("colorTable");
colorTable.Draw();
colorTable.ShowTable(_callback,0,0);
</script>
[/code]
演示：
http://www.jsgod.net/js/test_color_table.html
|
| 支持一下，如果颜色数组能想办法算出来就比较好了 |
[html]
<html id="container">
<head><title>soEditor: Color Palette</title>
<STYLE TYPE="text/css">
<!--
body, td, button {
font: MessageBox;
}
.sliderHandle {position: relative; cursor: default;}
td {font-size: 10px; font-family: verdana}
.outerSlideContainer {width: 150; height: 6; margin-left: 0; border: 0px;}
.gradContainer {width: 140; height: 6; border: 1px inset window; position: absolute; z-index: 4; font-size: 1; overflow: hidden; margin-left: 5px;}
.sliderHandle {width: 11; height: 14; cursor: hand; border: 0 outset white; overflow: hidden; z-index: 5;}
.sliderHandle img {width: 11; height: 14;}
.lineContainer {position: absolute; width: 139; height: 6; z-index: 0; margin-left: 5px;}
.line {width: 139; height: 6; z-index: 0; overflow: hidden; filter: alpha(style=1)}
#colorBox {width: 25; height: 40; border: 1 inset window; margin-left: 2px;}
#colorImage { border: 1px inset window; cursor: hand;}
input {padding: 0; margin: 0px; font-size: 10px; margin-left: 0px; border: 1px inset window;}
button {font-family: Arial, Helvetica; font-size: 8pt}
a:hover { background:transparent }
-->
</STYLE>
<SCRIPT LANGUAGE="Javascript">
<!--
///////////////////////////////////////////////////////////////////////
// This slidebar script was designed by Erik Arvidsson for WebFX //
// //
// For more info and examples see: http://webfx.eae.net //
// or send mail to erik@eae.net //
// //
// Feel free to use this code as lomg as this disclaimer is //
// intact. //
///////////////////////////////////////////////////////////////////////
var dragobject = null;
var type;
var onchange = "";
var tx;
var ty;
var red = 0;
var green = 0;
var blue = 0;
function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
var tmp = getReal(window.event.srcElement, "className", "sliderHandle"); //Traverse the element tree
if(tmp.className == "sliderHandle") {
dragobject = tmp; //This is a global reference to the current dragging object
onchange = dragobject.getAttribute("onchange"); //Set the onchange function
if (onchange == null) onchange = "";
type = dragobject.getAttribute("type"); //Find the type
if (type=="y") //Vertical
ty = (window.event.clientY - dragobject.style.pixelTop);
else //Horizontal
tx = (window.event.clientX - dragobject.style.pixelLeft);
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragobject = null; //Not draggable
}
}
function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}
function moveme_onmousemove() {
if(dragobject) {
if (type=="y") {
if(event.clientY >= 0) {
if ((event.clientY - ty >= 0) && (event.clientY - ty <= dragobject.parentElement.offsetHeight - dragobject.offsetHeight)) {
dragobject.style.top = event.clientY - ty;
}
if (event.clientY - ty < 0) {
dragobject.style.top = "0";
}
if (event.clientY - ty > dragobject.parentElement.offsetHeight - dragobject.offsetHeight - 0) {
dragobject.style.top = dragobject.parentElement.offsetHeight - dragobject.offsetHeight;
}
dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.offsetHeight - dragobject.offsetHeight);
eval(onchange.replace(/this/g, "dragobject"));
}
}
else {
if(event.clientX >= 0) {
if ((event.clientX - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.offsetWidth - dragobject.offsetWidth)) {
dragobject.style.left = event.clientX - tx;
}
if (event.clientX - tx < 0) {
dragobject.style.left = "0";
}
if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.offsetWidth - 0) {
dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.offsetWidth;
}
dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.offsetWidth);
eval(onchange.replace(/this/g, "dragobject"));
}
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
function setValue(el, val) {
el.value = val;
if (el.getAttribute("TYPE") == "x")
el.style.left = val * (el.parentElement.clientWidth - el.offsetWidth);
else
el.style.top = val * (el.parentElement.clientHeight - el.offsetHeight);
eval(el.onchange.replace(/this/g, "el"))
}
function IsDigit(allowPercent)
{
if (allowPercent)
return ((event.keyCode >= 48) && (event.keyCode <= 57) || event.keyCode == 37)
else
return (event.keyCode >= 48) && (event.keyCode <= 57)
}
function hsvToRgb(hsv) {
var rgb = new Object();
var i, f, p, q, t;
if (hsv.s == 0) {
// achromatic (grey)
rgb.r = rgb.g = rgb.b = hsv.v;
return rgb;
}
hsv.h /= 60; // sector 0 to 5
i = Math.floor( hsv.h );
f = hsv.h - i; // factorial part of h
p = hsv.v * ( 1 - hsv.s );
q = hsv.v * ( 1 - hsv.s * f );
t = hsv.v * ( 1 - hsv.s * ( 1 - f ) );
switch( i ) {
case 0:
rgb.r = hsv.v;
rgb.g = t;
rgb.b = p;
break;
case 1:
rgb.r = q;
rgb.g = hsv.v;
rgb.b = p;
break;
case 2:
rgb.r = p;
rgb.g = hsv.v;
rgb.b = t;
break;
case 3:
rgb.r = p;
rgb.g = q;
rgb.b = hsv.v;
break;
case 4:
rgb.r = t;
rgb.g = p;
rgb.b = hsv.v;
break;
default: // case 5:
rgb.r = hsv.v;
rgb.g = p;
rgb.b = q;
break;
}
return rgb;
}
function calculateRGB() {
if (window.event.button == 1 && dragobject == null) {
var hsv = new Object();
var h = window.event.srcElement.offsetHeight;
var y = window.event.offsetY;
hsv.h = 360 * window.event.offsetX / window.event.srcElement.offsetWidth;
if (y > h/2) {
hsv.s = 1.0;
hsv.v = 2 * (h - y) / h;
}
else {
hsv.v = 1.0;
hsv.s = y / (h/2);
}
var rgb = hsvToRgb(hsv);
public_setColor(rgb.r, rgb.g, rgb.b);
}
}
// This function is called when dragging a slider.
function update(color) {
switch(color) {
case 'red':
red = Math.round(255*redSlider.value);
redInput.value = Math.round(red);
break;
case 'green':
green = Math.round(255*greenSlider.value);
greenInput.value = Math.round(green);
break;
case 'blue':
blue = Math.round(255*blueSlider.value);
blueInput.value = Math.round(blue);
break;
}
var color = "RGB(" + red + "," + green + "," + blue + ")";
window.status = color;
colorBox.style.backgroundColor = color;
redLeft.style.background = "RGB(" + 0 + "," + green + "," + blue + ")";
redRight.style.background = "RGB(" + 255 + "," + green + "," + blue + ")";
greenLeft.style.background = "RGB(" + red + "," + 0 + "," + blue + ")";
greenRight.style.background = "RGB(" + red + "," + 255 + "," + blue + ")";
blueLeft.style.background = "RGB(" + red + "," + green + "," + 0 + ")";
blueRight.style.background = "RGB(" + red + "," + green + "," + 255 + ")";
var rHex = red.toString(16).toUpperCase();
var gHex = green.toString(16).toUpperCase();
var bHex = blue.toString(16).toUpperCase();
if (rHex.length < 2) rHex = '0' + rHex;
if (gHex.length < 2) gHex = '0' + gHex;
if (bHex.length < 2) bHex = '0' + bHex;
hexValue.value= '#' + rHex + gHex + bHex;
}
function updateInput(slider, v) {
if (!isNaN(v))
setValue(slider, Math.min(255, v)/255);
}
function updateHex(value) {
red = parseInt(value.substring(1,3), 16);
green = parseInt(value.substring(3,5), 16);
blue = parseInt(value.substring(5,7), 16);
redInput.value = red;
greenInput.value = green;
blueInput.value = blue;
updateInput(redSlider, red);
updateInput(greenSlider, green);
updateInput(blueSlider, blue);
}
function clickOnGrad(sliderEl) {
setValue(sliderEl, Math.min(Math.abs((event.offsetX+1)/event.srcElement.offsetWidth), 1.0));
}
function public_setColor(r, g, b) {
setValue(redSlider, Math.min(1.0, r));
setValue(greenSlider, Math.min(1.0, g));
setValue(blueSlider, Math.min(1.0, b));
}
function init() {
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
var color = (window.dialogArguments)?window.dialogArguments['color']:'';
var re=new RegExp("^#[ABCDEF0123456789]{6}$", 'i');
if (color && re.test(color))
updateHex(color);
hexValue.focus();
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="Ok" EVENT="onclick">
<!--
window.returnValue = hexValue.value;
window.close();
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="buttonFace" LEFTMARGIN=3 TOPMARGIN=3 onselectstart="window.event.returnValue=false;window.event.cancelBubble=true" ondragstart="return false" onLoad="init()">
<FIELDSET>
<LEGEND><B>Color picker</B></LEGEND>
<TABLE><TR><TD>
<TABLE BORDER="0">
<tr>
<td align="right">R</td>
<td>
<span class="outerSlideContainer">
<div class="gradContainer" onclick="clickOnGrad(redSlider)"></div>
<div class="lineContainer" id="redRight" style="background: RGB(255, 0, 0);">
<div class="line" id="redLeft" style="background: RGB(0,0,0);">
</div>
</div>
<div id="redSlider" class="sliderHandle" type="x" value="0" title="Red"
onchange="update('red')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div>
</span>
</td>
<td>
<input type="text" style="width:25px" id="redInput" value="0" onchange="updateInput(redSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()">
</td>
</tr>
<tr>
<td align="right">G</td>
<td>
<span class="outerSlideContainer">
<div class="gradContainer" onclick="clickOnGrad(greenSlider)"></div>
<div class="lineContainer" id="greenRight" style="background: RGB(0, 255, 0);">
<div class="line" id="greenLeft" style="background: RGB(0, 0, 0);">
</div>
</div>
<div id="greenSlider" class="sliderHandle" type="x" value="0" title="Green"
onchange="update('green')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div>
</span></td>
<td>
<input type="text" style="width:25px" id="greenInput" value="0" onchange="updateInput(greenSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()">
</td>
</tr>
<tr>
<td align="right">B</td>
<td>
<span class="outerSlideContainer">
<div class="gradContainer" onclick="clickOnGrad(blueSlider)"></div>
<div class="lineContainer" id="blueRight" style="background:RGB(0,0,255)">
<div class="line" id="blueLeft" style="background:RGB(0,0,0)">
</div>
</div>
<div id="blueSlider" class="sliderHandle" type="x" value="0" title="Blue"
onchange="update('blue')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div>
</span>
</td>
<td>
<input type="text" style="width:25px" id="blueInput" value="0" onchange="updateInput(blueSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()">
</td>
</tr>
<TR>
<TD>HEX</TD>
<TD ALIGN="right"><INPUT TYPE="text" NAME="hexValue" VALUE="#000000" STYLE="width:144px" onchange="updateHex(this.value)" onselectstart="window.event.cancelBubble=true"></TD>
<TD ROWSPAN="2"><DIV ID="colorBox" STYLE="background-color:#000000"></DIV></TD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="right">
<IMG src="attachments/2006/7/23/colors_g3yn3Zaheg48.jpg" WIDTH="164" HEIGHT="20" ID="colorImage" onmousedown="calculateRGB()" TITLE="Click to select color from this palette" onselectstart="window.event.returnValue=false;window.event.cancelBubble=true;">
</TD>
</TR>
</TABLE>
</TD><TD ALIGN="center">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<SCRIPT LANGUAGE="Javascript">
<!--
clr = new Array('00','33','66','99','CC','FF');
for(k = 0; k < 6; k++){
for(j = 0; j < 6;) {
document.write('<TR>\n');
for(m = 0; m < 3; m++) {
for(i = 0; i < 6; i++) {
document.write('<TD BGCOLOR="#'+clr[k]+clr[j+m]+clr[i]+'">');
document.write('<A HREF="#" ');
document.write('onClick="updateHex(\'#'+clr[k]+clr[j+m]+clr[i]+'\')\;">');
document.write('<IMG src="icons/pixel.gif" WIDTH=8 HEIGHT=8 BORDER=0></A></TD>\n');
}
}
j+=3;
document.write('</TR>\n');
}
}
//-->
</SCRIPT>
</TABLE>
216 color web palette
</TD></TR></TABLE>
<P ALIGN="right" STYLE="margin:5px 5px 5px 5px">
<BUTTON ID="Ok">Ok</BUTTON>
<BUTTON ONCLICK="window.close()">Cancel</BUTTON>
</P>
</FIELDSET>
<DIV STYLE="position:absolute;top:3px;left:270px;background:buttonFace;font-size:9px">
©2002 by Web Power
</DIV>
</body>
</html>
[/html] |
参考
网页调色板收集
http://bbs.blueidea.com/viewthread.php?tid=1724860&page=
http://search.blueidea.com/?q=%E7%BD%91%E9%A1%B5%E8%B0%83%E8%89%B2%E6%9D%BF&bisearch=bbs |
楼举说得好啊，我顶啊。
GOOD 。正寻觅之呢。后面的又来个锦上添花。 |
|
