PHP开发笔记 - Powered by Discuz! Board

标题: JavaScript颜色板调用 [打印本页]

作者: fangzhen 时间: 2009-2-16 10:38 标题: JavaScript颜色板调用

1定义颜色板

<HTML>
<HEAD>
<TITLE>颜色板</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var drag=false, cx=0, cy=0, o = parent.document.getElementById("_colorpalette");
function document.onmousemove(){
if(drag){
if(o.style.left=='')o.style.left=0;
if(o.style.top=='')o.style.top=0;
o.style.left = parseInt(o.style.left) + window.event.clientX-cx;
o.style.top = parseInt(o.style.top) + window.event.clientY-cy;
}
}
function document.onmousedown(){ dragStart(); }
function document.onmouseup() {drag=false;}
function document.onmouseout() { drag=false; }
function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}
function InitColorPalette() {
var x = document.getElementsByTagName('td');
for (var i=0; i<x.length; i++) {
x.onmouseover = over;
x.onmouseout = out;
x.onclick = click;
}
setColor( parent.getColorByPalette() ) ;
}
function setColor(color){
document.getElementById("colPreview").style.backgroundColor = color;
document.getElementById("hexColValue").value = color;
}
//Mouse over palette effects on
function over() {
var e = window.event.srcElement;
e.style.color = reverseColor(e.id) ;
e.innerHTML = 'O';
setColor(e.id);
}
//Mouse 移开
function out() {
this.innerHTML='';
}
//Mouse 点击
function click() {
selectColor(this.id);
}
function reverseColor(color){
var c = (color.indexOf("#")==-1 ) ? color : color.substring(1);
var len = c.length ;
var i,h;
var re = '#';
for(i=0;i<len ;i++){
h = parseInt("0x"+c.substring(i,i+1)) ;
re += (15-h).toString(16).toUpperCase() ;
}
return re;
}
//颜色选取
function selectColor(color){
if( color!='' && color.toString().match(/^#[0-9|A-F|a-f]{6}$/)==null ){
alert("颜色代码错误！");
return false;
}
parent.selectColorPalette(color);
}
</script>
<style type="text/css">
body{ margin:2px; background-color:#DCDCDC;}
td { overflow:hidden; cursor:default; color:#FFFFFF; font-size:8px; font-family:"Verdana";}
input {border: 1px; margin-top:1px; margin-left:1px; background-color: #ffffff; width:58px; font-family: Verdana; font-size: 11px; color: #000000;}
</style>
</head>
<body>
<div style="width:178px; height:20px; margin:3px 0px 3px 0px;cursor:move;">
<div id="colPreview" style=" border:1px solid #000000; width:25px; height:20px; float:left;"></div>
<div style="float:left;height:15px; width:80px;"><input type="text" id="hexColValue" value="" size="10"/></div>
<div style="float:left; width:46px;"><img style="cursor:pointer" src="nocolor.gif" width="18" align="absmiddle"></div>
<div style="float:left; font-size:12px; cursor:pointer; padding-top:3px;">关闭</div>
</div>
<table border="0" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#000000" >
<tr>
<td id="#000000" bgcolor="#000000" height="10" width="10"></td>
<td id="#003300" bgcolor="#003300" height="10" width="10"></td>
<td id="#006600" bgcolor="#006600" height="10" width="10"></td>
<td id="#009900" bgcolor="#009900" height="10" width="10"></td>
<td id="#00CC00" bgcolor="#00CC00" height="10" width="10"></td>
<td id="#00FF00" bgcolor="#00FF00" height="10" width="10"></td>
<td id="#330000" bgcolor="#330000" height="10" width="10"></td>
<td id="#336600" bgcolor="#336600" height="10" width="10"></td>
<td id="#339900" bgcolor="#339900" height="10" width="10"></td>
<td id="#33CC00" bgcolor="#33CC00" height="10" width="10"></td>
<td id="#33FF00" bgcolor="#33FF00" height="10" width="10"></td>
<td id="#660000" bgcolor="#660000" height="10" width="10"></td>
<td id="#666600" bgcolor="#666600" height="10" width="10"></td>
<td id="#669900" bgcolor="#669900" height="10" width="10"></td>
<td id="#66CC00" bgcolor="#66CC00" height="10" width="10"></td>
<td id="#66FF00" bgcolor="#66FF00" height="10" width="10"></td>
</tr>
<tr>
<td id="#333333" bgcolor="#333333" height="10" width="10"></td>
<td id="#003333" bgcolor="#003333" height="10" width="10"></td>
<td id="#006633" bgcolor="#006633" height="10" width="10"></td>
<td id="#009933" bgcolor="#009933" height="10" width="10"></td>
<td id="#00CC33" bgcolor="#00CC33" height="10" width="10"></td>
<td id="#00FF33" bgcolor="#00FF33" height="10" width="10"></td>
<td id="#330033" bgcolor="#330033" height="10" width="10"></td>
<td id="#336633" bgcolor="#336633" height="10" width="10"></td>
<td id="#339933" bgcolor="#339933" height="10" width="10"></td>
<td id="#33CC33" bgcolor="#33CC33" height="10" width="10"></td>
<td id="#33FF33" bgcolor="#33FF33" height="10" width="10"></td>
<td id="#660033" bgcolor="#660033" height="10" width="10"></td>
<td id="#666633" bgcolor="#666633" height="10" width="10"></td>
<td id="#669933" bgcolor="#669933" height="10" width="10"></td>
<td id="#66CC33" bgcolor="#66CC33" height="10" width="10"></td>
<td id="#66FF33" bgcolor="#66FF33" height="10" width="10"></td>
</tr>
<tr>
<td id="#666666" bgcolor="#666666" height="10" width="10"></td>
<td id="#003366" bgcolor="#003366" height="10" width="10"></td>
<td id="#006666" bgcolor="#006666" height="10" width="10"></td>
<td id="#009966" bgcolor="#009966" height="10" width="10"></td>
<td id="#00CC66" bgcolor="#00CC66" height="10" width="10"></td>
<td id="#00FF66" bgcolor="#00FF66" height="10" width="10"></td>
<td id="#330066" bgcolor="#330066" height="10" width="10"></td>
<td id="#336666" bgcolor="#336666" height="10" width="10"></td>
<td id="#339966" bgcolor="#339966" height="10" width="10"></td>
<td id="#33CC66" bgcolor="#33CC66" height="10" width="10"></td>
<td id="#33FF66" bgcolor="#33FF66" height="10" width="10"></td>
<td id="#660066" bgcolor="#660066" height="10" width="10"></td>
<td id="#666666" bgcolor="#666666" height="10" width="10"></td>
<td id="#669966" bgcolor="#669966" height="10" width="10"></td>
<td id="#66CC66" bgcolor="#66CC66" height="10" width="10"></td>
<td id="#66FF66" bgcolor="#66FF66" height="10" width="10"></td>
</tr>
<tr>
<td id="#999999" bgcolor="#999999" height="10" width="10"></td>
<td id="#003399" bgcolor="#003399" height="10" width="10"></td>
<td id="#006699" bgcolor="#006699" height="10" width="10"></td>
<td id="#009999" bgcolor="#009999" height="10" width="10"></td>
<td id="#00CC99" bgcolor="#00CC99" height="10" width="10"></td>
<td id="#00FF99" bgcolor="#00FF99" height="10" width="10"></td>
<td id="#330099" bgcolor="#330099" height="10" width="10"></td>
<td id="#336699" bgcolor="#336699" height="10" width="10"></td>
<td id="#339999" bgcolor="#339999" height="10" width="10"></td>
<td id="#33CC99" bgcolor="#33CC99" height="10" width="10"></td>
<td id="#33FF99" bgcolor="#33FF99" height="10" width="10"></td>
<td id="#660099" bgcolor="#660099" height="10" width="10"></td>
<td id="#666699" bgcolor="#666699" height="10" width="10"></td>
<td id="#669999" bgcolor="#669999" height="10" width="10"></td>
<td id="#66CC99" bgcolor="#66CC99" height="10" width="10"></td>
<td id="#66FF99" bgcolor="#66FF99" height="10" width="10"></td>
</tr>
<tr>
<td id="#CCCCCC" bgcolor="#CCCCCC" height="10" width="10"></td>
<td id="#0033CC" bgcolor="#0033CC" height="10" width="10"></td>
<td id="#0066CC" bgcolor="#0066CC" height="10" width="10"></td>
<td id="#0099CC" bgcolor="#0099CC" height="10" width="10"></td>
<td id="#00CCCC" bgcolor="#00CCCC" height="10" width="10"></td>
<td id="#00FFCC" bgcolor="#00FFCC" height="10" width="10"></td>
<td id="#3300CC" bgcolor="#3300CC" height="10" width="10"></td>
<td id="#3366CC" bgcolor="#3366CC" height="10" width="10"></td>
<td id="#3399CC" bgcolor="#3399CC" height="10" width="10"></td>
<td id="#33CCCC" bgcolor="#33CCCC" height="10" width="10"></td>
<td id="#33FFCC" bgcolor="#33FFCC" height="10" width="10"></td>
<td id="#6600CC" bgcolor="#6600CC" height="10" width="10"></td>
<td id="#6666CC" bgcolor="#6666CC" height="10" width="10"></td>
<td id="#6699CC" bgcolor="#6699CC" height="10" width="10"></td>
<td id="#66CCCC" bgcolor="#66CCCC" height="10" width="10"></td>
<td id="#66FFCC" bgcolor="#66FFCC" height="10" width="10"></td>
</tr>
<tr>
<td id="#FFFFFF" bgcolor="#FFFFFF" height="10" width="10"></td>
<td id="#0033FF" bgcolor="#0033FF" height="10" width="10"></td>
<td id="#0066FF" bgcolor="#0066FF" height="10" width="10"></td>
<td id="#0099FF" bgcolor="#0099FF" height="10" width="10"></td>
<td id="#00CCFF" bgcolor="#00CCFF" height="10" width="10"></td>
<td id="#00FFFF" bgcolor="#00FFFF" height="10" width="10"></td>
<td id="#3300FF" bgcolor="#3300FF" height="10" width="10"></td>
<td id="#3366FF" bgcolor="#3366FF" height="10" width="10"></td>
<td id="#3399FF" bgcolor="#3399FF" height="10" width="10"></td>
<td id="#33CCFF" bgcolor="#33CCFF" height="10" width="10"></td>
<td id="#33FFFF" bgcolor="#33FFFF" height="10" width="10"></td>
<td id="#6600FF" bgcolor="#6600FF" height="10" width="10"></td>
<td id="#6666FF" bgcolor="#6666FF" height="10" width="10"></td>
<td id="#6699FF" bgcolor="#6699FF" height="10" width="10"></td>
<td id="#66CCFF" bgcolor="#66CCFF" height="10" width="10"></td>
<td id="#66FFFF" bgcolor="#66FFFF" height="10" width="10"></td>
</tr>
<tr>
<td id="#FF0000" bgcolor="#FF0000" height="10" width="10"></td>
<td id="#993300" bgcolor="#993300" height="10" width="10"></td>
<td id="#996600" bgcolor="#996600" height="10" width="10"></td>
<td id="#999900" bgcolor="#999900" height="10" width="10"></td>
<td id="#99CC00" bgcolor="#99CC00" height="10" width="10"></td>
<td id="#99FF00" bgcolor="#99FF00" height="10" width="10"></td>
<td id="#CC0000" bgcolor="#CC0000" height="10" width="10"></td>
<td id="#CC6600" bgcolor="#CC6600" height="10" width="10"></td>
<td id="#CC9900" bgcolor="#CC9900" height="10" width="10"></td>
<td id="#CCCC00" bgcolor="#CCCC00" height="10" width="10"></td>
<td id="#CCFF00" bgcolor="#CCFF00" height="10" width="10"></td>
<td id="#FF0000" bgcolor="#FF0000" height="10" width="10"></td>
<td id="#FF6600" bgcolor="#FF6600" height="10" width="10"></td>
<td id="#FF9900" bgcolor="#FF9900" height="10" width="10"></td>
<td id="#FFCC00" bgcolor="#FFCC00" height="10" width="10"></td>
<td id="#FFFF00" bgcolor="#FFFF00" height="10" width="10"></td>
</tr>
<tr>
<td id="#00FF00" bgcolor="#00FF00" height="10" width="10"></td>
<td id="#993333" bgcolor="#993333" height="10" width="10"></td>
<td id="#996633" bgcolor="#996633" height="10" width="10"></td>
<td id="#999933" bgcolor="#999933" height="10" width="10"></td>
<td id="#99CC33" bgcolor="#99CC33" height="10" width="10"></td>
<td id="#99FF33" bgcolor="#99FF33" height="10" width="10"></td>
<td id="#CC0033" bgcolor="#CC0033" height="10" width="10"></td>
<td id="#CC6633" bgcolor="#CC6633" height="10" width="10"></td>
<td id="#CC9933" bgcolor="#CC9933" height="10" width="10"></td>
<td id="#CCCC33" bgcolor="#CCCC33" height="10" width="10"></td>
<td id="#CCFF33" bgcolor="#CCFF33" height="10" width="10"></td>
<td id="#FF0033" bgcolor="#FF0033" height="10" width="10"></td>
<td id="#FF6633" bgcolor="#FF6633" height="10" width="10"></td>
<td id="#FF9933" bgcolor="#FF9933" height="10" width="10"></td>
<td id="#FFCC33" bgcolor="#FFCC33" height="10" width="10"></td>
<td id="#FFFF33" bgcolor="#FFFF33" height="10" width="10"></td>
</tr>
<tr>
<td id="#0000FF" bgcolor="#0000FF" height="10" width="10"></td>
<td id="#993366" bgcolor="#993366" height="10" width="10"></td>
<td id="#996666" bgcolor="#996666" height="10" width="10"></td>
<td id="#999966" bgcolor="#999966" height="10" width="10"></td>
<td id="#99CC66" bgcolor="#99CC66" height="10" width="10"></td>
<td id="#99FF66" bgcolor="#99FF66" height="10" width="10"></td>
<td id="#CC0066" bgcolor="#CC0066" height="10" width="10"></td>
<td id="#CC6666" bgcolor="#CC6666" height="10" width="10"></td>
<td id="#CC9966" bgcolor="#CC9966" height="10" width="10"></td>
<td id="#CCCC66" bgcolor="#CCCC66" height="10" width="10"></td>
<td id="#CCFF66" bgcolor="#CCFF66" height="10" width="10"></td>
<td id="#FF0066" bgcolor="#FF0066" height="10" width="10"></td>
<td id="#FF6666" bgcolor="#FF6666" height="10" width="10"></td>
<td id="#FF9966" bgcolor="#FF9966" height="10" width="10"></td>
<td id="#FFCC66" bgcolor="#FFCC66" height="10" width="10"></td>
<td id="#FFFF66" bgcolor="#FFFF66" height="10" width="10"></td>
</tr>
<tr>
<td id="#FFFF00" bgcolor="#FFFF00" height="10" width="10"></td>
<td id="#993399" bgcolor="#993399" height="10" width="10"></td>
<td id="#996699" bgcolor="#996699" height="10" width="10"></td>
<td id="#999999" bgcolor="#999999" height="10" width="10"></td>
<td id="#99CC99" bgcolor="#99CC99" height="10" width="10"></td>
<td id="#99FF99" bgcolor="#99FF99" height="10" width="10"></td>
<td id="#CC0099" bgcolor="#CC0099" height="10" width="10"></td>
<td id="#CC6699" bgcolor="#CC6699" height="10" width="10"></td>
<td id="#CC9999" bgcolor="#CC9999" height="10" width="10"></td>
<td id="#CCCC99" bgcolor="#CCCC99" height="10" width="10"></td>
<td id="#CCFF99" bgcolor="#CCFF99" height="10" width="10"></td>
<td id="#FF0099" bgcolor="#FF0099" height="10" width="10"></td>
<td id="#FF6699" bgcolor="#FF6699" height="10" width="10"></td>
<td id="#FF9999" bgcolor="#FF9999" height="10" width="10"></td>
<td id="#FFCC99" bgcolor="#FFCC99" height="10" width="10"></td>
<td id="#FFFF99" bgcolor="#FFFF99" height="10" width="10"></td>
</tr>
<tr>
<td id="#00FFFF" bgcolor="#00FFFF" height="10" width="10"></td>
<td id="#9933CC" bgcolor="#9933CC" height="10" width="10"></td>
<td id="#9966CC" bgcolor="#9966CC" height="10" width="10"></td>
<td id="#9999CC" bgcolor="#9999CC" height="10" width="10"></td>
<td id="#99CCCC" bgcolor="#99CCCC" height="10" width="10"></td>
<td id="#99FFCC" bgcolor="#99FFCC" height="10" width="10"></td>
<td id="#CC00CC" bgcolor="#CC00CC" height="10" width="10"></td>
<td id="#CC66CC" bgcolor="#CC66CC" height="10" width="10"></td>
<td id="#CC99CC" bgcolor="#CC99CC" height="10" width="10"></td>
<td id="#CCCCCC" bgcolor="#CCCCCC" height="10" width="10"></td>
<td id="#CCFFCC" bgcolor="#CCFFCC" height="10" width="10"></td>
<td id="#FF00CC" bgcolor="#FF00CC" height="10" width="10"></td>
<td id="#FF66CC" bgcolor="#FF66CC" height="10" width="10"></td>
<td id="#FF99CC" bgcolor="#FF99CC" height="10" width="10"></td>
<td id="#FFCCCC" bgcolor="#FFCCCC" height="10" width="10"></td>
<td id="#FFFFCC" bgcolor="#FFFFCC" height="10" width="10"></td>
</tr>
<tr>
<td id="#FF00FF" bgcolor="#FF00FF" height="10" width="10"></td>
<td id="#9933FF" bgcolor="#9933FF" height="10" width="10"></td>
<td id="#9966FF" bgcolor="#9966FF" height="10" width="10"></td>
<td id="#9999FF" bgcolor="#9999FF" height="10" width="10"></td>
<td id="#99CCFF" bgcolor="#99CCFF" height="10" width="10"></td>
<td id="#99FFFF" bgcolor="#99FFFF" height="10" width="10"></td>
<td id="#CC00FF" bgcolor="#CC00FF" height="10" width="10"></td>
<td id="#CC66FF" bgcolor="#CC66FF" height="10" width="10"></td>
<td id="#CC99FF" bgcolor="#CC99FF" height="10" width="10"></td>
<td id="#CCCCFF" bgcolor="#CCCCFF" height="10" width="10"></td>
<td id="#CCFFFF" bgcolor="#CCFFFF" height="10" width="10"></td>
<td id="#FF00FF" bgcolor="#FF00FF" height="10" width="10"></td>
<td id="#FF66FF" bgcolor="#FF66FF" height="10" width="10"></td>
<td id="#FF99FF" bgcolor="#FF99FF" height="10" width="10"></td>
<td id="#FFCCFF" bgcolor="#FFCCFF" height="10" width="10"></td>
<td id="#FFFFFF" bgcolor="#FFFFFF" height="10" width="10"></td>
</tr>
</table>
</body>
</html>

2JS调用

document.write("<div id='_colorpalette' onmouseout='hidescolorpalettelowly()' onmouseover='colorpaletteMenuMouseOver()' style='position: absolute; z-index: 9998; width: 184; height: 164; display: none;border-left:2px solid #F3F3F3;border-top:2px solid #F3F3F3; border-bottom:2px solid #999999;border-right:2px solid #999999;'>");
var _palettecolor = '#000000';
var script_t = document.getElementsByTagName('script');
var js_url='';
for (var i=0; i<script_t.length; i++) {
if( -1 != script_t.src.indexOf("colorpalette.js") ){ js_url = script_t.src.replace(/colorpalette.js/,'colorpalette.html') ; break;}
}
document.write("<iframe name='_colorpaletteIframe' src='"+js_url+"' scrolling=no frameborder=0 width=100% height=100%></iframe></div>");
var e_colorpalette = document.getElementById("_colorpalette");
function setcolorpaletteXY(){
var e = window.event.srcElement;
var l=e.offsetLeft;
var t=e.offsetTop;
while(e=e.offsetParent){
l+=e.offsetLeft;
t+=e.offsetTop;
}
e_colorpalette.style.left = l-3;
e_colorpalette.style.top = t+16;
}
function hiddencolorpalette(){e_colorpalette.style.display = "none";};
function showcolorpalette(){e_colorpalette.style.display = "block";setcolorpaletteXY();};
var colorpaletteiTime;
function hidescolorpalettelowly(){
//colorpaletteiTime = window.setTimeout("hiddencolorpalette()",700);
}
function colorpaletteMenuMouseOver(){
//clearTimeout(colorpaletteiTime);
}
function setColorPalette(color){
_palettecolor = color;
}
function getColorByPalette(){
return _palettecolor;
}

3使用实例

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>

<script language="JavaScript" type="text/JavaScript">

var dEL,sEL;
function SelectColor(what){
dEL = document.getElementById("d_"+what);
sEL = document.getElementById("s_"+what);
setColorPalette(dEL.value);
showcolorpalette();
}
function selectColorPalette(color){
if (color) {
dEL.value=color;
sEL.style.backgroundColor=color;
setColorPalette(color);
}else{
dEL.value='';
sEL.style.backgroundColor='';
}
hiddencolorpalette();
}

</script>
<script type="text/javascript" src="js/colorpalette.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="d_tcolor" name="titlecolor" size="9" type="text" />

<img id="s_tcolor" border="0" src="rect.gif" style="cursor: hand" width="18"/></div>
</form>
</body>
</html>

欢迎光临 PHP开发笔记 (http://phpvi.com/) Powered by Discuz! 6.1.0