【www.gdgbn.com--php常用代码】

我的实现方式很简单，不带任何颜色算法，步骤如下：

1.在网上找一个"网页颜色代码"的站点,然后把大部分的颜色值抽取出来封装到一个文件中。

2.然后通过ajax异步获取后再创建的调色板的面板ui。

3.最后写相关的颜色选取操作就搞定了

我写的这个demo依赖的jquery框架写的(主要是节省我的时间(*^__^*) 嘻嘻)

实例图：

封装了一个叫做palettetools的调色板工具类

兼容ie6+,fx,gg,op,safari等浏览器 

/*
 * 调色板
 * author:mr.co
 * date:2010-12-23
 * qq:co.mr.co@gmail.com
 */
function palettetools(eid/*需要触发调色板元素id*/){
    var eobj = $(\"#\"+eid);
    var paletteid = \"divpalette_\" + eid;
    if(eobj[0] == null || eobj[0] == undefined) return;    
    if(eobj[0].nodename.tolowercase() != \"input\") {
        alert(\"error message:only support input elements...(jq.palette.js)\");
        return;
    }
    if(!(\"value\" in eobj[0])) return;    
    this.eobj = eobj;
    this.paletteid = paletteid;
    var colorbox = new array();
    /*异步获取颜色值*/
    $.ajax({url:\"palette/color.htm\",type:\"get\",cache:false,async:false,
            error:function(){ alert(\"error message:file not found color.htm...(jq.palette.js)\"); },
            success:function(data){                        
                var colors = data.split(\" \");                
                colorbox.push(\"\"+ paletteid +\"" style="position:absolute;display:none;background:#fff; width:240px; _width:242px;  height:180px; border:1px solid #ccc; ">
\");
                for(var i = 0; i < colors.length; i++){
                    if(colors[i].replace(/[^a-za-z0-9u4e00-u9fa5@.]/g,\"\") != \"\")
                        colorbox.push(\"
\");
                }
                colorbox.push(\"\");
            }
    });        
    /*将颜色面板追加到当前文本域后面*/
    eobj.after(colorbox.join(\"\"));
}
palettetools.prototype.show = function(args/*可设置调色板上左位置传值方式为{top:\"1px\",left:\"1px\"}*/){    
    var top,left;
    if(args != undefined){
        top = args.top || 0;
        left = args.left || 0;
        $(\"#\"+this.paletteid).css教程({top:top,left:left});
    }    
    var obj = this.eobj,pid = this.paletteid;    
    if(obj == undefined || obj == null) return;    
    /*设置选中的颜色值*/
    var setobjcolor = function(selectedcolor){
        obj.css({background:selectedcolor});
        obj.val(selectedcolor);            
    }
    /*显示文本域的焦点、显示/隐藏*/
    obj.focus(function(){        
        $(\"#\"+pid).css({display:\"block\"});
    }).blur(function(){
        $(\"#\"+pid).css({display:\"none\"});            
    });    
    /*颜色面板鼠标滑动效果*/    
    $(\"#\"+ pid +\" li\").mouseo教程ver(function(){    
        setobjcolor($(this).attr(\"colorval\"));
    })
    /*最终选取颜色点击*/
    .click(function(){
        setobjcolor($(this).attr(\"colorval\"));
        $(\"#\"+pid).css({display:\"none\"});
    });        
}

本文来源：http://www.gdgbn.com/jiaocheng/28524/