全js的，自制拾色器

xiaoerp · 发表于 2012/3/21 01:05:58

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。如果您注册时有任何问题请联系客服QQ： 83569622 　。

您需要登录才可以下载或查看，没有帐号？注册

x

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
<title>自制拾色器</title>
<script type="text/javascript" language="javascript">
/***************************************
Last modifed: junix by 2010-05-20
MSN:junix2008@hotmail.com
QQ:8290182
****************************************/
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
function getY(e){
e=e||window.event;
return e.clientY+document.body.scrollTop;
}
function getElementPos(element)
{
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera);
// not opera spoof
var el =element;// document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none')
{
 return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect) //IE
{
 box = el.getBoundingClientRect();
 var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
 var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
 return {x:box.left + scrollLeft, y:box.top + scrollTop};
}
else if(document.getBoxObjectFor) // gecko
{
 box = document.getBoxObjectFor(el);
 var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
 var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
 pos = [box.x - borderLeft, box.y - borderTop];
}
else // safari & opera
{
 pos = [el.offsetLeft, el.offsetTop];
 parent = el.offsetParent;
 if (parent != el)
 {
 while (parent)
 {
 pos[0] += parent.offsetLeft;
 pos[1] += parent.offsetTop;
 parent = parent.offsetParent;
 }
 }
 if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
 {
 pos[0] -= document.body.offsetLeft;
 pos[1] -= document.body.offsetTop;
 }
}
if (el.parentNode)
{
 parent = el.parentNode;
}
else
{
 parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
{
 // account for any scrolled ancestors
 pos[0] -= parent.scrollLeft;
 pos[1] -= parent.scrollTop;
 if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return {x:pos[0], y:pos[1]}; }
function GetPageScroll()
{
var x, y;
if(window.pageYOffset)
{
 // all except IE
 y = window.pageYOffset;
 x = window.pageXOffset;
}
else if(document.documentElement && document.documentElement.scrollTop)
{
 // IE 6 Strict
 y = document.documentElement.scrollTop;
 x = document.documentElement.scrollLeft;
}
else if(document.body)
{
 // all other IE
 y = document.body.scrollTop;
 x = document.body.scrollLeft;
 } return {X:x, Y:y};
}
function setX(elem,pos){
elem.style.left=pos+"px";
}
function setY(elem,pos){
elem.style.top=pos+"px";
}
function show(elem){
elem.style.display=elem.$oldDisplay||"";
}
//show div
function ShowColorDiv(obj,target)
{
 var o=document.getElementById("divColor");
 document.getElementById("hdTarget").value=target;
 var pos=getElementPos(obj);
 var y=pos.y;
 var x=pos.x;
 show(o);
 x-=20;
 y+=20;
 if(x<0) x=0;
 if(y<0) y=0;
 setX(o,x);
 setY(o,y);
}
//hide div
function HideColorDiv()
{
 var o=document.getElementById("divColor");
 o.style.display='none';
}
//set color
function SetColor(obj)
{
document.getElementById(document.getElementById("hdTarget").value).style.backgroundColor=obj.style.backgroundColor;
HideColorDiv();
}
//click color area
function ClickColor(obj)
{
var i,j;
for(i=0;i<obj.parentElement.parentElement.rows.length;i++)
{
 for(j=0;j<obj.parentElement.parentElement.rows.cells.length;j++)
 {
 obj.parentElement.parentElement.rows.cells[j].style.borderWidth="0px";
 }
}
obj.style.borderWidth="1px";
obj.style.borderColor="blue";
obj.style.borderStyle="solid";
}
</script>
</head>
<body>
<table style="width: 300px; border:solid 1px black;" cellpadding="0px" cellspacing="0px">
 <tr>
 <td id="td1" style="width: 200px; border-right:solid 1px black;border-bottom:solid 1px black;">
  </td>
 <td style="width: 100px; border-bottom:solid 1px black;">
 <input id="Button1" type="button" value="选取颜色" /></td>
 </tr>
 <tr>
 <td id="td2" style="width: 200px; border-right:solid 1px black;border-bottom:solid 1px black;">
  </td>
 <td style="width: 100px; border-bottom:solid 1px black;">
 <input id="Button2" type="button" value="选取颜色"/></td>
 </tr>
 <tr>
 <td id="td3" style="width: 200px; border-right:solid 1px black;">
  </td>
 <td style="width: 100px; ">
 <input id="Button3" type="button" value="选取颜色"/></td>
 </tr>
</table>
<div id="divColor" style="background-color:white; position:absolute; border: solid 0px black; display:none; width:184px; height:184px;">
<input id="hdTarget" type="hidden" value="" />
<table style="border:solid 1px #000000;" cellspacing="1px" cellpadding="0px">
 <tr>
 <td style="width: 14px; height: 14px; background-color:#000000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#000080;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00008B;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#0000CD;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#0000FF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#006400;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#008000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#008080;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#008B8B;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00BFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00CED1;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00FA9A; vertical-align:top;">
 <div style="float:right;"><a><img alt="关闭拾色器" style="border:solid 1px black; height:8px; width:8px;" src="images/little_close.jpg" /></a></div></td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#00FF00;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00FF7F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#00FFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#191970;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#1E90FF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#20B2AA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#228B22;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#2E8B57;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#2F4F4F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#32CD32;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#3CB371;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#40E0D0;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#4169E1;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#4682B4;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#483D8B;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#48D1CC;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#4B0082;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#556B2F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#5F9EA0;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#6495ED;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#66CDAA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#696969;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#6A5ACD;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#6B8E23;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#708090;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#778899;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#7B68EE;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#7CFC00;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#7FFF00;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#7FFFD4;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#800000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#800080;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#808000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#808080;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#87CEEB;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#87CEFA;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#8A2BE2;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#8B0000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#8B008B;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#8B4513;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#8FBC8F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#90EE90;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#9370DB;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#9400D3;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#98FB98;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#9932CC;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#9ACD32;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#A0522D;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#A52A2A;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#A9A9A9;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#ADD8E6;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#ADFF2F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#AFEEEE;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#B0C4DE;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#B0E0E6;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#B22222;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#B8860B;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#BA55D3;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#BC8F8F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#BDB76B;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#C0C0C0;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#C71585;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#CD5C5C;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#CD853F;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#D2691E;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#D2B48C;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#D3D3D3;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#D8BFD8;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DA70D6;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DAA520;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DB7093;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DC143C;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#DCDCDC;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DDA0DD;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#DEB887;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#E0FFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#E6E6FA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#E9967A;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#EE82EE;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#EEE8AA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F08080;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F0E68C;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F0F8FF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F0FFF0;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#F0FFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F4A460;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F5DEB3;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F5F5DC;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F5F5F5;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F5FFFA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#F8F8FF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FA8072;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FAEBD7;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FAF0E6;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FAFAD2;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FDF5E6;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#FF0000;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF00FF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF1493;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF4500;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF6347;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF69B4;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF7F50;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FF8C00;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFA07A;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFA500;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFB6C1;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFC0CB;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#FFD700;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFDAB9;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFDEAD;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFE4B5;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFE4C4;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFE4E1;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFEBCD;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFEFD5;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFF0F5;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFF5EE;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFF8DC;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFACD;">
  </td>
 </tr>
 <tr>
 <td style="width: 14px; height: 14px; background-color:#FFFAF0;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFAFA;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFF00;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFE0;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFF0;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 <td style="width: 14px; height: 14px; background-color:#FFFFFF;">
  </td>
 </tr>
</table>
</div>

</body>
</ html>

帐号		自动登录	找回密码
密码			注册

社区人物壹佰网重点话题	分享知识原创连载活动正式启动已有673人参加查看全部会员靓照旅行分享文学连载	壹佰读书会开始招收成员了
招聘求职壹佰网信息化选型平台	倾听用户的心声纵横四海谈IT如何提升企业管理管理小说连载《苏州桥》	如何获取努力值
原创连载－我来管管看 ERP分享+	推荐连载：[已结帖][分享知识原创连载]财务供应链项目新手实施手记：记录自己正	入门学习-致所有初学者

全js的，自制拾色器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。如果您注册时有任何问题请联系客服QQ： 83569622 。

浏览过的版块

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。如果您注册时有任何问题请联系客服QQ： 83569622 　。