JavaScript颜色表

转载 2006年05月19日 16:11:00
Fireworks中选择颜色的时候,如图,当鼠标单击图中红线圈住的地方就会弹出一个颜色表,在颜色表中选取一种颜色后,图中红线圈住的地方就会变成选取的颜色,同时颜色表消失。
image

下面让我们用JavaScript在网页中也加入类似功能,实际效果和代码如下:
image
<script>
function findObj(n, d){
    var p,i,x;
    if(!d)d=document;
    if((p=n.indexOf("?"))>0 && parent.frames.length){
        d=parent.frames[n.substring(p+1)].document;
        n=n.substring(0,p);
    }
    if(!(x=d[n]) && d.all)x=d.all[n];
    for(i=0; !x && i<d.forms.length; i++)x=d.forms[i][n];
    for(i=0; !x && d.layers && i<d.layers.length; i++)x=findObj(n,d.layers[i].document);
    if(!x && d.getElementById)x=d.getElementById(n);
    return x;
}
function colorsa(c){
    findObj('colordiv').style.display='none';
    findObj('colortd').style.backgroundColor='#'+c;
    alert('#'+c); //修改此处可达到其他不同的效果
}
var hexch=new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
function ToHex(n){
    var h, l;
    n=Math.round(n);
    l=n%16;
    h=Math.floor((n / 16)) % 16;
    return (hexch[h]+hexch[l]);
}
function ToHex1(n){
    var l1;
    n=Math.round(n);
    l1=n % 16;
    return (hexch[l1]+hexch[l1]);
}
function wc(r, g, b, n){
    r=((r*16+r)*3*(15 - n)+0x80*n) / 15;
    g=((g*16+g)*3*(15 - n)+0x80*n) / 15;
    b=((b*16+b)*3*(15 - n)+0x80*n) / 15;
    document.write('<td width="8" bgcolor="#'+ToHex(r)+ToHex(g)+ToHex(b)+'" onclick="colorsa(/''+ToHex(r)+ToHex(g)+ToHex(b)+'/');" onmouseover="this.style.backgroundImage=/'url(color_bg.gif)/';" onmouseout="this.style.backgroundImage=/'/';"></td>');
}
var cnum=new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
function colortabl(){
    for(i=0; i < 15; i ++){
        document.write('<table border="0" cellpadding="0" cellspacing="0"><tr>');
        document.write('<td bgcolor="#'+ToHex1(i)+ToHex1(i)+ToHex1(i)+'" height="8" width="8" onclick="colorsa(/''+ToHex1(i)+ToHex1(i)+ToHex1(i)+'/');" onmouseover="this.style.backgroundImage=/'url(color_bg.gif)/';" onmouseout="this.style.backgroundImage=/'/';"></td>')
        for(j=0; j < 30; j ++){
            n1=j % 5;
            n2=Math.floor(j / 5)*3;
            n3=n2+3;
            wc((cnum[n3]*n1+cnum[n2]*(5 - n1)),(cnum[n3+1]*n1+cnum[n2+1]*(5 - n1)),(cnum[n3+2]*n1+cnum[n2+2]*(5 - n1)), i);
        }
        document.writeln('</tr></table>');
    }
}
</script>
<div id="colordiv" style="display:none;position:absolute;z-index:5;" onmouseout="this.style.display='none';" onmouseover="this.style.display='';">
    <script type="text/JavaScript">colortabl();</script>
</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#000000;" id="colortd" onclick="findObj('colordiv').style.display='';">
    <tr>
        <td><img src="color_ch.gif"></td>
    </tr>
</table>
</body>
</html>

需要的图片:
imagecolor_bg.gif
imagecolor_ch.gif

代码中注释的部分为单击颜色表中的颜色块时执行的动作,这里是弹出警告窗口,内容为选取的颜色代码,可以修改为其他效果。

网页中颜色表

  • 2012年12月24日 11:19
  • 22KB
  • 下载

jsp页面引入调色板、颜色表

jsp页面:   javascript脚本: $(document).ready(function() {    initPanel(); //初始化调色板    $("#fon...

2012_RGB颜色表

  • 2013年04月09日 14:09
  • 42KB
  • 下载

RGB颜色表(全)

  • 2013年03月14日 13:01
  • 296KB
  • 下载

cocos2d-x3.2中最新RGB颜色表集合

■RGB(255,192,203) ■★●◆pink(粉红) ■RGB(220,20,60) ■★●◆crimson(腥红) ■RGB(255,240,245) ■★●◆lavenderblush...

颜色表,用于配色

  • 2012年02月03日 09:17
  • 73KB
  • 下载

android 常用RGB颜色表

  • 2014年10月16日 20:45
  • 347KB
  • 下载

十六进制颜色表(转)

http://hi.baidu.com/caillt/blog/item/1faf5755162576c7b745aebb.html  十六进制颜色表(转) 2007-11-10 11:10数值背景中...

伪彩颜色表

  • 2013年09月04日 16:29
  • 22KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript颜色表
举报原因:
原因补充:

(最多只允许输入30个字)