综合类不错的调色板
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要两个步骤
第一步：把如下代码加入到<body>区域中
<div id="rdiv"><img src="../zh/../zh/images/r.gif" align=absmiddle width=256 height=10 name=rb>http://code.ik8.com/html/../zh/../zh/images/r.gif</div>
<div id="rpointdiv"><img src="../zh/images/a.gif">http://code.ik8.com/html/../zh/images/a.gif</div>
<div id="gdiv"><img src="../zh/images/g.gif" align=absmiddle width=256 height=10 name=rb>http://code.ik8.com/html/../zh/images/g.gif</div>
<div id="gpointdiv"><img src="../zh/images/a.gif">http://code.ik8.com/html/../zh/images/a.gif</div>
<div id="bdiv"><img src="../zh/images/b.gif" align=absmiddle width=256 height=10 name=rb>http://code.ik8.com/html/../zh/images/b.gif</div>
<div id="bpointdiv"><img src="../zh/images/a.gif">http://code.ik8.com/html/../zh/images/a.gif</div>
<div id="bgcdiv"></div>
<form action="#" method=post name=setform>
<tableborder="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<tdheight="40" bgcolor="#7db1b5">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td> </td>
<tdclass=color> r:
<input type=text name=rd size=3 maxlength=3 onchange="change(form.rd.value,
form.gd.value, form.bd.value);myclip();">
</td>
</tr>
<tr>
<td>
<input type=text name=bgx size=6 maxlength=6 onchange=xch("bg");>
</td>
<tdclass=color> g:
<input type=text name=gd size=3 maxlength=3 onchange="change(form.rd.value,
form.gd.value, form.bd.value);myclip();">
</td>
</tr>
<tr>
<td> </td>
<tdclass=color> b:
<input type=text name=bd size=3 maxlength=3 onchange="change(form.rd.value,
form.gd.value, form.bd.value);myclip();">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script language=javascript><!--
var rc = document.setform.rd;
var gc = document.setform.gd;
var bc = document.setform.bd;
//--></script>
<script>
var defaultbg="ffffff";
// dynamic layer object
// sophisticated layer/element targeting and animation object which provides the core
functionality needed in most dhtml applications
// 19990326
// copyright (c) 1999 dan steinman
// distributed under the terms of the gnu library general public license
// available at http://www.dansteinman.com/dynduo/
// browsercheck object
// provides browser checking variables
var px;
var py;
function browsercheck() {
var b = navigator.appname
if (b=="netscape") this.b = "ns"
else if (b=="microsoft internet explorer") this.b = "ie"
else this.b = b
this.version = navigator.appversion
this.v = parseint(this.version)
this.ns = (this.b=="ns" && this.v>=4)
this.ns4 = (this.b=="ns" && this.v==4)
this.ns5 = (this.b=="ns" && this.v==5)
this.ie = (this.b=="ie" && this.v>=4)
this.ie4 = (this.version.indexof('msie 4')>0)
this.ie5 = (this.version.indexof('msie 5')>0)
this.min = (this.ns||this.ie)
}
is = new browsercheck()
// dynlayer constructor
function dynlayer(id,nestref,frame) {
if (!dynlayer.set && !frame) dynlayerinit()
if (is.ns) {
if (is.ns) {
if (!frame) {
if (!nestref) var nestref = dynlayer.nestrefarray
if (dynlayer.usetest && !dynlayertest(id,nestref)) return
this.css = (nestref)? eval("document."+nestref+".document."+id) :
document.layers
}
else this.css = (nestref)?
eval("parent."+frame+".document."+nestref+".document."+id) :
parent.frames.document.layers
this.elm = this.event = this.css
this.doc = this.css.document
}
if (is.ns5) {
this.elm = document.getelementbyid(id)
this.css = this.elm.style
this.doc = document
}
this.x = this.css.left
this.y = this.css.top
this.w = this.css.clip.width
this.h = this.css.clip.height
}
else if (is.ie) {
this.elm = this.event = (frame)? parent.frames.document.all :
document.all
this.css = (frame)? parent.frames.document.all.style :
document.all.style
this.doc = document
this.x = this.elm.offsetleft
this.y = this.elm.offsettop
this.w = (is.ie4)? this.css.pixelwidth : this.elm.offsetwidth
this.h = (is.ie4)? this.css.pixelheight : this.elm.offsetheight
}
this.id = id
this.obj = id + "dynlayer"
eval(this.obj + "=this")
this.moveto = dynlayermoveto
this.moveby = dynlayermoveby
this.show = dynlayershow
this.hide = dynlayerhide
this.slideinit = dynlayerslideinit
this.clipinit = dynlayerclipinit
this.write = dynlayerwrite
}
// dynlayer core methods (moveto, moveby, hide, show)
function dynlayermoveto(x,y) {
if (x!=null) {
this.x = x
if (is.ns) this.css.left = this.x
else this.css.pixelleft = this.x
}
if (y!=null) {
this.y = y
if (is.ns) this.css.top = this.y
else this.css.pixeltop = this.y
}
}
function dynlayermoveby(x,y) {
this.moveto(this.x+x,this.y+y)
}
function dynlayershow() {
this.css.visibility = (is.ns)? "show" : "visible"
}
function dynlayerhide() {
this.css.visibility = (is.ns)? "hide" : "hidden"
}
// dynlayer slide methods (optional)
// straight line animation methods
function dynlayerslideinit() {
this.slideto = dynlayerslideto
this.slideby = dynlayerslideby
this.slidestart = dynlayerslidestart
this.slide = dynlayerslide
this.onslide = new function("")
this.onslideend = new function("")
}
function dynlayerslideto(endx,endy,inc,speed,fn) {
if (endx==null) endx = this.x
if (endy==null) endy = this.y
var distx = endx-this.x
var disty = endy-this.y
this.slidestart(endx,endy,distx,disty,inc,speed,fn)
}
function dynlayerslideby(distx,disty,inc,speed,fn) {
var endx = this.x + distx
var endy = this.y + disty
this.slidestart(endx,endy,distx,disty,inc,speed,fn)
}
function dynlayerslidestart(endx,endy,distx,disty,inc,speed,fn) {
if (this.slideactive) return
if (!inc) inc = 10
if (!speed) speed = 20
var num = math.sqrt(math.pow(distx,2) + math.pow(disty,2))/inc
if (num==0) return
var dx = distx/num
var dy = disty/num
if (!fn) fn = null
this.slideactive = true
this.slide(dx,dy,endx,endy,num,1,speed,fn)
}
function dynlayerslide(dx,dy,endx,endy,num,i,speed,fn) {
if (!this.slideactive) return
if (i++ < num) {
this.moveby(dx,dy)
this.onslide()
if (this.slideactive)
settimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",
speed)
else this.onslideend()
}
else {
this.slideactive = false
this.moveto(endx,endy)
this.onslide()
this.onslideend()
eval(fn)
}
}
// dynlayer clip methods (optional)
// provides layer clipping functionality
function dynlayerclipinit(cliptop,clipright,clipbottom,clipleft) {
this.clipto = dynlayerclipto
this.clipby = dynlayerclipby
this.clipvalues = dynlayerclipvalues
if (is.ie) {
if (arguments.length==4) this.clipto(cliptop,clipright,clipbottom,clipleft)
else if (is.ie4) this.clipto(0,this.css.pixelwidth,this.css.pixelheight,0)
}
}
function dynlayerclipto(t,r,b,l) {
if (t==null) t = this.clipvalues('t')
if (r==null) r = this.clipvalues('r')
if (b==null) b = this.clipvalues('b')
if (l==null) l = this.clipvalues('l')
if (is.ns) {
this.css.clip.top = t
this.css.clip.right = r
this.css.clip.bottom = b
this.css.clip.left = l
}
else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
function dynlayerclipby(t,r,b,l) {
this.clipto(this.clipvalues('t')+t,this.clipvalues('r')+r,this.clipvalues('b')+b,this.clipvalues(
'l')+l)
}
function dynlayerclipvalues(which) {
if (is.ie) var clipv = this.css.clip.split("rect(").split(")").split("px")
if (which=="t") return (is.ns)? this.css.clip.top : number(clipv)
if (which=="r") return (is.ns)? this.css.clip.right : number(clipv)
if (which=="b") return (is.ns)? this.css.clip.bottom : number(clipv)
if (which=="l") return (is.ns)? this.css.clip.left : number(clipv)
}
// dynlayer write method (optional)
// rewrites the contents of the layer
function dynlayerwrite(html) {
if (is.ns) {
this.doc.open()
this.doc.write(html)
this.doc.close()
}
else if (is.ie) {
this.event.innerhtml = html
}
}
// dynlayertest function (optional - disable with dynlayer.usetest=false)
// makes sure the layer target is correct before assigning the dynlayer, outputs useful info if
incorrect
function dynlayertest(id,nestref) {
var ref = new array()
if (nestref) ref = nestref.split('.document.')
ref = id
var refstr = (is.ns)? 'document.'+ref : 'document.all.'+ref
for (var i=1; i<=ref.length; i++) {
if (eval(refstr)) {
if (ref.length==i) return true
else refstr += (is.ns)? '.document.'+ref : '.all.'+ref
}
else {
var str ='dynlayer error:'
for (j in ref) {
str += '\n'+ref
if (j==i-1) str += '<-- this layer cannot be found'
}
if (dynlayertest.count++<5) alert(str)
else alert("too many dynlayer errors, quitting.")
return false
}
}
return false
}
dynlayertest.count = 0
// dynlayerinit
// automatically retrieves nested heirarchy of the layer and defines dynlayers named with "div"
function dynlayerinit(nestref) {
if (!dynlayer.set) dynlayer.set = true
if (is.ns) {
if (nestref) ref = eval('document.'+nestref+'.document')
else {nestref = ''; ref = document;}
for (var i=0; i<ref.layers.length; i++) {
var divname = ref.layers.name
dynlayer.nestrefarray = nestref
var index = divname.indexof("div")
if (index > 0) {
eval(divname.substr(0,index)+' = new
dynlayer("'+divname+'","'+nestref+'")')
}
if (ref.layers.document.layers.length > 0) {
dynlayer.refarray = (nestref=='')?
ref.layers.name : nestref+'.document.'+ref.layers.name
}
}
if (dynlayer.refarray.i < dynlayer.refarray.length) {
dynlayerinit(dynlayer.refarray)
}
}
else if (is.ie) {
for (var i=0; i<document.all.tags("div").length; i++) {
var divname = document.all.tags("div").id
var index = divname.indexof("div")
if (index > 0) {
eval(divname.substr(0,index)+' = new dynlayer("'+divname+'")')
}
}
}
return true
}
dynlayer.nestrefarray = new array()
dynlayer.refarray = new array()
dynlayer.refarray.i = 0
dynlayer.set = false
dynlayer.usetest = true
// css function (optional)
// returns css syntax for generated layers
function css(id,left,top,width,height,color,vis,z,other) {
if (id=="start") return '<style type="text/css">\n'
else if (id=="end") return '</style>'
var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px;
top:'+top+'px;' : '#'+id+' {position:relative;'
if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
if (arguments.length>=5 && height!=null) {
str += ' height:'+height+'px;'
if (arguments.length<9 || other.indexof('clip')==-1) str += ' clip:rect(0px
'+width+'px '+height+'px 0px);'
}
if (arguments.length>=6 && color!=null) str += (is.ns)? '
layer-background-color:'+color+';' : ' background-color:'+color+';'
if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
if (arguments.length==9 && other!=null) str += ' '+other
str += '}\n'
return str
}
function writecss(str,showalert) {
str = css('start')+str+css('end')
document.write(str)
if (showalert) alert(str)
}
//css(id,left,top,width,height,color,vis,z,other)
if (is.ns){ x=-10; y=-23;}
else if(is.ie5){ x=-1; y=-42;}
else {x=0;y=0;}
writecss(
css('bgcdiv',x+10,y+160,53,40,defaultbg,1,8) +
css('rdiv', x+65,y+160,256,9,null,1,1) +
css('rpointdiv',x+65,y+169,12,8,null,1,2) +
css('gdiv', x+65,y+180,256,9,null,1,3) +
css('gpointdiv',x+65,y+189,12,8,null,1,4) +
css('bdiv', x+65,y+200,256,9,null,1,5) +
css('bpointdiv',x+65,y+209,12,8,null,1,6)
)
var gcurr;
var display;
function xch(g) {
document.setform.value = document.setform.value.touppercase();
if (g == gcurr) {
use(g);
}
return true;
}
function initialize(bgc) {
document.setform.bgx.value = bgc;
return true;
}
function myclip() {
var c = h2d(document.setform.value);
var cr = (c >> 16) & 255, cg = (c >> 8) & 255, cb = (c) & 255;
r.clipto(null,cr,null,null);
g.clipto(null,cg,null,null);
b.clipto(null,cb,null,null);
rpoint.moveto(r.x-5+cr,null);
gpoint.moveto(g.x-5+cg,null);
bpoint.moveto(b.x-5+cb,null);
}
function use(g) {
gcurr = g;
display = window;
var c = h2d(document.setform.value);
var cr = (c >> 16) & 255, cg = (c >> 8) & 255, cb = (c) & 255;
change(cr, cg, cb);
myclip();
return true;
}
function change(r, g, b) {
document.setform.rd.value = r;
document.setform.gd.value = g;
document.setform.bd.value = b;
document.setform.value = converttohex(r, g, b);
display.css.backgroundcolor = converttohex(r, g, b);
display.css.bgcolor = converttohex(r, g, b);
return true;
}
function h2d(s)
{
var r = 0;
var index = "0123456789abcdef";
s = s.touppercase();
for (var i = 0; i < s.length; i++) {
r <<= 4;
r += index.indexof(s.substr(i, 1));
}
return r;
}
function converttohex(r, g, b) {
var hex = "0123456789abcdef";
return ""
+ hex.substr(r >> 4, 1) + hex.substr(r & 15, 1)
+ hex.substr(g >> 4, 1) + hex.substr(g & 15, 1)
+ hex.substr(b >> 4, 1) + hex.substr(b & 15, 1);
}
function pcolor(form)
{
form.bgcolor.value = h2d(form.bgx.value);
return true;
}
function init() {
dynlayerinit()
initialize(defaultbg);
var c = h2d(document.setform.bgx.value);
rc.value = (c >> 16) & 255;
gc.value = (c >> 8) & 255;
bc.value = (c) & 255;
defaultrvalue = rc.value;
defaultgvalue = gc.value;
defaultbvalue = bc.value;
r.clipinit(0,defaultrvalue,10,0)
r.dragactive = false
g.clipinit(0,defaultgvalue,10,0)
g.dragactive = false
b.clipinit(0,defaultbvalue,10,0)
b.dragactive = false
r.clipto(null,defaultrvalue+1,null,null)
g.clipto(null,defaultgvalue+1,null,null)
b.clipto(null,defaultbvalue+1,null,null)
rpoint.moveto(r.x-5+defaultrvalue,null)
gpoint.moveto(g.x-5+defaultgvalue,null)
bpoint.moveto(b.x-5+defaultbvalue,null)
use("bg");
display.css.backgroundcolor = converttohex(defaultrvalue, defaultgvalue, defaultbvalue)
display.css.bgcolor = converttohex(defaultrvalue, defaultgvalue, defaultbvalue)
document.onmousedown = mousedown
document.onmousemove = mousemove
document.onmouseup = mouseup
if (is.ns) document.captureevents(event.mousedown | event.mousemove | event.mouseup)
}
function mousedown(e) {
if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
var x = (is.ns)? e.pagex : event.x+document.body.scrollleft
var y = (is.ns)? e.pagey : event.y+document.body.scrolltop
if (x>=r.x && x<=r.x+r.w && y>=r.y && y<=r.y+r.h+10) {
r.clipto(null,x-r.x,null,null)
if ( x >= r.x + r.w )
{
rpointx = r.w + r.x - 6
rc.value= rpointx + 6 - r.x -1
}
else if ( x <= r.x )
{
rpointx = r.x - 6
rc.value= rpointx + 6 - r.x
}
else
{
rpointx = x - 6
rc.value= rpointx + 6 - r.x
}
rpoint.moveto(rpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
r.dragoffsetx = x-r.x
r.dragoffsety = y-r.y
r.dragactive = true
return false
}
else if (x>=g.x && x<=g.x+g.w && y>=g.y && y<=g.y+g.h+10) {
g.clipto(null,x-g.x,null,null)
if ( x >= g.x + g.w )
{
gpointx = g.w + g.x - 6
gc.value= gpointx + 6 - g.x -1
}
else if ( x <= g.x )
{
gpointx = g.x - 6
gc.value= gpointx + 6 - g.x
}
else
{
gpointx = x - 6
gc.value= gpointx + 6 - g.x
}
gpoint.moveto(gpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
g.dragoffsetx = x-g.x
g.dragoffsety = y-g.y
g.dragactive = true
return false
}
else if (x>=b.x && x<=b.x+b.w && y>=b.y && y<=b.y+b.h+10) {
b.clipto(null,x-b.x,null,null)
if ( x >= b.x + b.w )
{
bpointx = b.w + b.x - 6
bc.value= bpointx + 6 - b.x -1
}
else if ( x <= b.x )
{
bpointx = b.x - 6
bc.value= bpointx + 6 - b.x
}
else
{
bpointx = x - 6
bc.value= bpointx + 6 - b.x
}
bpoint.moveto(bpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
b.dragoffsetx = x-b.x
b.dragoffsety = y-b.y
b.dragactive = true
return false
}
else return true
}
function mousemove(e) {
var x = (is.ns)? e.pagex : event.x+document.body.scrollleft
var y = (is.ns)? e.pagey : event.y+document.body.scrolltop
if (r.dragactive) {
r.clipto(null,x-r.x,null,null)
if ( x >= r.x + r.w )
{
rpointx = r.w + r.x - 6
rc.value= rpointx + 6 - r.x -1
}
else if ( x <= r.x )
{
rpointx = r.x - 6
rc.value= rpointx + 6 - r.x
}
else
{
rpointx = x - 6
rc.value= rpointx + 6 - r.x
}
rpoint.moveto(rpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
return false
}
else if (g.dragactive) {
g.clipto(null,x-g.x,null,null)
if ( x >= g.x + g.w )
{
gpointx = g.w + g.x - 6
gc.value= gpointx + 6 - g.x -1
}
else if ( x <= g.x )
{
gpointx = g.x - 6
gc.value= gpointx + 6 - g.x
}
else
{
gpointx = x - 6
gc.value= gpointx + 6 - g.x
}
gpoint.moveto(gpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
return false
}
else if (b.dragactive) {
b.clipto(null,x-b.x,null,null)
if ( x >= b.x + b.w )
{
bpointx = b.w + b.x - 6
bc.value= bpointx + 6 - b.x -1
}
else if ( x <= b.x )
{
bpointx = b.x - 6
bc.value= bpointx + 6 - b.x
}
else
{
bpointx = x - 6
bc.value= bpointx + 6 - b.x
}
bpoint.moveto(bpointx,null)
display.css.backgroundcolor = converttohex(rc.value, gc.value, bc.value)
display.css.bgcolor = converttohex(rc.value, gc.value, bc.value)
return false
}
else return true
}
function mouseup(e) {
var x = (is.ns)? e.pagex : event.x+document.body.scrollleft
var y = (is.ns)? e.pagey : event.y+document.body.scrolltop
r.dragactive = false
g.dragactive = false
b.dragactive = false
change(rc.value, gc.value, bc.value);
return true
}
</script>
第二步：把“onload="init();"”加在<body>标记里
例如：<body onload="init();">
页:
[1]