综合类相当不错的调色板
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要三个步骤
第一步：把如下代码加入到<head>区域中
<style type="text/css">
<!--
#subtext { font-family:helvetica,arial; font-size:8pt; background-color:#cccccc; layer-background-color:#cccccc;}
#title { font-family:helvetica,arial; font-size:13pt; font-weight:bold; }
#red { position:absolute; left:54; top:100; width:256; height:10; z-index:1; visibility:visible; background-image:url(redback.gif); layer-background-image:url(redback.gif); clip:rect(0px 256px 10px 0px);}
#green { position:absolute; left:54; top:120; width:256; height:10; z-index:1; visibility:visible; background-image:url(greenback.gif); layer-background-image:url(greenback.gif); clip:rect(0px 256px 10px 0px);}
#blue { position:absolute; left:54; top:140; width:256; height:10; z-index:1; visibility:visible; background-image:url(blueback.gif); layer-background-image:url(blueback.gif); clip:rect(0px 256px 10px 0px);}
#redslider { position:absolute; left:50; top:98; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#greenslider { position:absolute; left:50; top:118; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#blueslider { position:absolute; left:50; top:138; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#display { position:absolute; left:320; top:100; width:50px; height:50px; z-index:1; visibility:visible; background-color:#000000; layer-background-color:#000000; }
#hexvalue { position:absolute; left:54; top:160; width:320; height:20; z-index:1; visibility:visible;}
#titlebar { position:absolute; left:54; top:70; width:320; height:20; z-index:1; background-color:#dddddd; layer-background-color:#dddddd;}
#colortable { position:absolute; left:380; top:70; width:320; height:200; z-index:1; visibility:visible;}
//-->
</style>
<script language="javascript">
<!-- begin
function init() {
ns4 = (document.layers)?true:false;
ie4 = (document.all)?true:false;
slidermin = 50;
slidermax = 306;
rvalue=0;
gvalue=0;
bvalue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
rgb = '0';
rgb = '0';
rgb = '0';
ractive = false;
gactive = false;
bactive = false;
document.onmousedown = mousedown
document.onmousemove = mousemove
document.onmouseup = mouseup
if (ns4) document.captureevents(event.mousedown | event.mousemove | event.mouseup);
if (ns4) {
domred = document.redslider;
domred.xpos = parseint(domred.left);
domred.ypos = parseint(domred.top);
domred.w = domred.clip.width;
domred.h = domred.clip.height;
domgreen = document.greenslider;
domgreen.xpos = parseint(domgreen.left);
domgreen.ypos = parseint(domgreen.top);
domgreen.w = domgreen.clip.width;
domgreen.h = domgreen.clip.height;
domblue = document.blueslider;
domblue.xpos = parseint(domblue.left);
domblue.ypos = parseint(domblue.top);
domblue.w = domblue.clip.width;
domblue.h = domblue.clip.height;
domdisplay = document.display;
domvalue = document.hexvalue.document.frmvalue.valuedisp;
domredvalue = document.hexvalue.document.frmvalue.rgbdisp;
domgreenvalue = document.hexvalue.document.frmvalue.rgbdisp;
dombluevalue = document.hexvalue.document.frmvalue.rgbdisp;
}
else {
domred = redslider.style;
domred.xpos = redslider.offsetleft;
domred.ypos = redslider.offsettop;
domred.w = redslider.clientwidth;
domred.h = redslider.clientheight;
domgreen = greenslider.style;
domgreen.xpos = greenslider.offsetleft;
domgreen.ypos = greenslider.offsettop;
domgreen.w = greenslider.clientwidth;
domgreen.h = greenslider.clientheight;
domblue = blueslider.style;
domblue.xpos = blueslider.offsetleft;
domblue.ypos = blueslider.offsettop;
domblue.w = blueslider.clientwidth;
domblue.h = blueslider.clientheight;
domdisplay = display;
domvalue = frmvalue.valuedisp;
domredvalue = frmvalue.rgbdisp;
domgreenvalue = frmvalue.rgbdisp;
dombluevalue = frmvalue.rgbdisp;
}
hexarray = new array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
}
function mousedown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true;
var x = (ns4)? e.pagex : event.x+document.body.scrollleft;
var y = (ns4)? e.pagey : event.y+document.body.scrolltop;
if (x > domred.xpos && x < domred.xpos+domred.w && y > domred.ypos && y < domred.ypos+domred.h){ ractive = true; dragobject = domred; }
if (x > domgreen.xpos && x < domgreen.xpos+domgreen.w && y > domgreen.ypos && y < domgreen.ypos+domgreen.h){ gactive = true; dragobject = domgreen; }
if (x > domblue.xpos && x < domblue.xpos+domblue.w && y > domblue.ypos && y < domblue.ypos+domblue.h){ bactive = true; dragobject = domblue; }
if (ractive==true || gactive==true || bactive==true){
if (x>=dragobject.xpos && x<=dragobject.xpos+dragobject.w) {
dragobject.dragoffsetx = x-dragobject.xpos
}
return false
}
else {
return true
}
}
function mousemove(e) {
var x = (ns4)? e.pagex : event.x+document.body.scrollleft;
var y = (ns4)? e.pagey : event.y+document.body.scrolltop;
if (ractive) {
rmoveto = x-dragobject.dragoffsetx;
if (rmoveto > slidermax) rmoveto = 306;
if (rmoveto < slidermin) rmoveto = 50;
domred.xpos = rmoveto;
domred.left = domred.xpos;
rvalue = (domred.xpos+4)-50;
calcvalue(rmoveto-50, 'red');
}
if (gactive) {
gmoveto = x-dragobject.dragoffsetx;
if (gmoveto > slidermax) gmoveto = slidermax;
if (gmoveto < slidermin) gmoveto = slidermin;
domgreen.xpos = gmoveto;
domgreen.left = domgreen.xpos;
gvalue = (domgreen.xpos+4)-50;
calcvalue(gmoveto-50, 'green');
}
if (bactive) {
bmoveto = x-dragobject.dragoffsetx;
if (bmoveto > slidermax) bmoveto = slidermax;
if (bmoveto < slidermin) bmoveto = slidermin;
domblue.xpos = bmoveto;
domblue.left = domblue.xpos;
bvalue = (domblue.xpos+4)-50;
calcvalue(bmoveto-50, 'blue');
}
return true
}
function mouseup(e) {
var x = (ns4)? e.pagex : event.x+document.body.scrollleft
var y = (ns4)? e.pagey : event.y+document.body.scrolltop
ractive = false;
gactive = false;
bactive = false;
return true
}
function calcvalue(base, color) {
base -= 1;
if (base < 16) { first = 0; }
else { first = parseint(base/16); }
if (base < 0 ) { second = 0; base = 0; }
else { second = parseint(base%16); }
c1=hexarray;
c2=hexarray;
if (color == 'red') { r1 = c1; r2 = c2; rgb=base; }
else if (color == 'green') { g1 = c1; g2 = c2; rgb=base; }
else { b1 = c1; b2 = c2; rgb=base; }
domvalue.value = eval('"'+r1+r2+g1+g2+b1+b2+'"');
domredvalue.value = eval('"'+rgb+'"');
domgreenvalue.value = eval('"'+rgb+'"');
dombluevalue.value = eval('"'+rgb+'"');
if (ns4) { domdisplay.bgcolor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
else { domdisplay.style.backgroundcolor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
return true;
}
function manualset(value,color) {
if (value < 0) value=0;
if (value > 255) value=255;
++value;
calcvalue(value,color);
if (color == 'red'){ domred.xpos = value+slidermin-4; domred.left = domred.xpos; }
else if (color == 'green'){ domgreen.xpos = value+slidermin-4; domgreen.left = domgreen.xpos; }
else { domblue.xpos = value+slidermin-4; domblue.left = domblue.xpos; }
}
function converthex(hexstring) {
if(hexstring == null) hexstring = domvalue.value;
inputhexarray = new array(6);
for(i=0;i<=5;++i) {
inputhexarray = hexstring.charat(i);
}
for(i=0;i<=5;++i) {
temphexval = inputhexarray;
for(j=0;j<=15;++j) {
if(temphexval == hexarray) temphexval = j;
}
inputhexarray = temphexval;
}
rgb = (inputhexarray*16)+inputhexarray+1;
calcvalue(rgb,'red');
manualset(rgb,'red');
rgb = (inputhexarray*16)+inputhexarray+1;
calcvalue(rgb,'green');
manualset(rgb,'green');
rgb = (inputhexarray*16)+inputhexarray+1;
calcvalue(rgb,'blue');
manualset(rgb,'blue');
}
// end -->
</script>
第二步：把如下代码加入到<body>区域中
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="redslider"></div>
<div id="greenslider"></div>
<div id="blueslider"></div>
<div id="colortable">
<table border=0 cellpadding=0 cellspacing=1>
<tr><td colspan=18 align=center id="subtext">standard 216 color palette</td></tr>
<script>
<!--
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+clr+clr+'>');
document.write('<a href="javascript:void(null)" ');
document.write('onclick="converthex(\''+clr+clr+clr+'\')\;">');
document.write('<img src=blankgif width=10 height=10 border=0>http://code.ik8.com/html/blankgif</a></td>\n');
}
}
j+=3;
document.write('</tr>\n');
}
}
//-->
</script>
</table>
</div>
<div id="display"><img src="blank.gif" width=50 height=50 border=0>http://code.ik8.com/html/blank.gif</div>
<div id="titlebar">
<table border=0 cellpadding=2 cellspacing=0 width=320>
<tr>
<td id="title">houser's rgb2hex dhtml app</td>
</tr>
</table>
</div>
<div id="hexvalue"><form name="frmvalue">
<table border=0 cellpadding=2 cellspacing=0 width=320 bgcolor=#eeeeee>
<tr>
<td align=center>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td id="subtext">red</td>
<td id="subtext">green</td>
<td id="subtext">blue</td>
</tr>
<tr>
<td><input type=text size=3 maxlength=3 name="rgbdisp" value="0" onblur="manualset(this.value,'red');"></td>
<td><input type=text size=3 maxlength=3 name="rgbdisp" value="0" onblur="manualset(this.value,'green');"></td>
<td><input type=text size=3 maxlength=3 name="rgbdisp" value="0" onblur="manualset(this.value,'blue');"></td>
</tr>
</table>
</td>
<td align=center>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td id="subtext">hexdecimal</td>
</tr>
<tr>
<td><input type=text size=6 maxlength=6 name="valuedisp" value="000000" onblur="converthex();"></td>
</tr>
</table>
</td>
</tr>
</table></form>
</div>
第三步：把“onload="init()"”加在<body>标记里
例如：<body onload="init()">
页:
[1]