/*┌─ 深度学习(js)颜色选择器  ────────────────────┐│  colorPicker│  感谢你使用 深度学习(js)颜色选择器│  本代码完全公开和免费，你可以任意复制、传播、修改和使用，│  但不得公开发表代码 不得用做商业用途，不得向其他使用者收费。│  使用时，请保留此段信息，谢谢配合│                        作者：吕海鹏      2008-5-29└──────────────────  www.DeepTeach.com  ───┘【安装使用】1、先将js文件拷贝到您网站的目录，不需要做任何修改 范例如：根目录下位置：/js/Deepteach_colorPicker.js2、在需要调用html标签 id="colorPicker",范例如：3、在调用html标签的后边调用Deepteach_colorPicker.js，范例如：*///div层document.write ("
     
  ");var oColorPopup=document.getElementById("colorPopup");var oColorPicker=document.getElementById("colorPicker");//在div层内显示颜色选择器函数(main)function  showColorPicker(){    //判断选择器是否显示    if(oColorPopup.style.display=="none")   {        //获取鼠标的坐标值 for  IE、Firefox        window.document.οnclick=function(evt){            //evt=evt || window.event;            evt = evt ? evt : (window.event ? window.event : null);            oColorPopup.style.left=evt.clientX+"px";            oColorPopup.style.top=evt.clientY+"px";            window.document.onclick=null;        }       oColorPopup.style.display="block";    }    else {       oColorPopup.style.display="none";    }     initColor();}// 初始化颜色选择器函数function initColor(){    var baseColorHex=new Array('00','33','66','99','CC','FF');     //256色的颜色是用00,33,66,99,cc,ff组成    var SpColorHex=new Array('000000','333333','666666','999999','cccccc','FFFFFF', 'FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF' );    var colorRGB ="";    var sColorPopup;    sColorPopup="
     
";    sColorPopup+="";    sColorPopup+=" ";    sColorPopup+="";    sColorPopup+="
";    sColorPopup+="
         
          
           
            
";//1行2列 //竖 start sColorPopup+="
             
              "; //第1列 for(i=0;i<12;i++) { sColorPopup+="
                "; colorRGB=SpColorHex[i]; sColorPopup+="
"; sColorPopup+="
"; } sColorPopup+="
"; //竖 end sColorPopup+="
            
"; sColorPopup+="
             
              "; //第2列 for(n=0;n<2;n++){ //循环2块 for(i=0;i<6;i++) { //每块6行 sColorPopup+="
                "; for(j=0+3*n;j<3+3*n;j++) { for(k=0;k<6;k++) { colorRGB=baseColorHex[j]+baseColorHex[k]+baseColorHex[i]; sColorPopup+="
"; } } sColorPopup+="
"; } } sColorPopup+="
"; sColorPopup+="
           
          
         
";    sColorPopup+="
";    oColorPopup.innerHTML=sColorPopup;}//当前颜色块函数function   currentColor(colorStr)  {    document.getElementById("colorDis").style.backgroundColor=colorStr;    document.getElementById("colorHexDis").value=colorStr.toUpperCase();    //toUpperCase()方法将颜色值大写}//点击选择颜色函数function clickColor(colorStr) {    oColorPicker.style.backgroundColor=colorStr;    oColorPicker.value=colorStr;    oColorPopup.style.display="none";}//关闭颜色选择器函数function doClose() {      oColorPopup.style.display="none";}//oColorPicker对象 绑定事件处理函数oColorPicker.οnclick=showColorPicker;

 

2.颜色拾取器是免费的，只有6kb。他的核心是jQuery.他的使用方法是转换class为"iColorPicker"的input field将其转换为颜色拾取器。

地址:

http://www.supersite.me/website-building/jquery-free-color-picker/

使用方法非常简单：

只要你导入了jQuery和iColorPicker脚本。那么每一个class属性为"iColorPicker"的输入框将变成漂亮的颜色选择器。

重要: 每个输入框必须是唯一的ID。

原理：

在加载js库文件的时候，将自动搜索页面，如果存在 class="iColorPicker"的输入框，则在body的底部添加两个隐藏的DIV。

分别是 iColorPicker和iColorPickerBg.在点击图片的onclick事件中触发iColorShow方法。它会将iColorPicker显示出来，而将

iColorPickerBg遮盖住其他地区。