www.gusucode.com > 艺帆全站DIV+CSS体育用品公司网站源码 1.7.5源码程序 > i5808/images/Deepteach_colorPicker.js

    
document.write ("<div  id='colorPopup'  style=' position:absolute; z-index:100;  display:none; '></div>  ");

var oColorPopup=document.getElementById("colorPopup");
var oColorPicker=document.getElementById("colorPicker");

function  showColorPicker()
{

	if(oColorPopup.style.display=="none")   {

		window.document.onclick=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="<table  width='260'  border='1'  cellPadding=1  cellSpacing=0   bordercolordark='#ffffff'  bordercolorlight='#000000'  bgcolor='#cccccc'  title='颜色选择器' ><tr><td>";
	sColorPopup+="<input   id='colorDis'  style='width:50px;border:solid 1px #000000;background-color:#ffff00;margin-left:3px' disabled title='当前颜色' />";
	sColorPopup+=" <input id='colorHexDis'  style='width:70px;border:inset 1px;font-family:Arial;' type='text' value='#FFFF00' readonly title='当前颜色16进制值'/>";

	sColorPopup+="</td></tr><tr><td>";
	sColorPopup+="<table  border='0' cellpadding='0' cellspacing='0' align='center' ><tr><td bgcolor='#000000' width='30'>";//1行2列
	//竖 start
	sColorPopup+="<table  border='0' cellpadding='0'  cellspacing='1' bgcolor='#000000' align='center' >";		//第1列
	for(i=0;i<12;i++)
	{
		sColorPopup+="<tr  height='12'>";
		colorRGB=SpColorHex[i];
		sColorPopup+="<td width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;' title='点击选择颜色"+colorRGB+"'></td>";
		sColorPopup+="</tr>";
	}
    sColorPopup+="</table>";
    //竖 end
	sColorPopup+="</td><td>";
	sColorPopup+="<table  border='0'    cellpadding='0'    cellspacing='1'    bgcolor=#000000 align='center' >";	//第2列

	for(n=0;n<2;n++){	//循环2块
		for(i=0;i<6;i++) {  //每块6行
			sColorPopup+="<tr    height=12>";
			for(j=0+3*n;j<3+3*n;j++)
			{
				for(k=0;k<6;k++)
				{
					colorRGB=baseColorHex[j]+baseColorHex[k]+baseColorHex[i];
					sColorPopup+="<td  width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;'  title='点击选择颜色"+colorRGB+"'></td>";
				}
			}
			sColorPopup+="</tr>";
		}
	}

	sColorPopup+="</table>";

	sColorPopup+="</td></tr></table>";
	sColorPopup+="</td></tr></table>";
	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.onclick=showColorPicker;