选色器

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30550271

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量109

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/moliwanzi/p/3939772.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#container{width:120px;height:30px;background:#000;opacity:0.7;text-align:center;color:#FFF;font:12px/30px tahoma;display:none;position:absolute;z-index:5555;}
</style>
</head>

<body>
<script type="text/javascript" language="javascript">
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
window.οnlοad=function(){
var colorTable=''
for (i=0;i<2;i++){
for (j=0;j<6;j++){
colorTable=colorTable+'<tr height=15>'
colorTable=colorTable+'<td width=15 style="background-color:#000000">'
if (i==0){
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" οnmοuseοver="domouseover(this.style.backgroundColor)">'
}
else{
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" οnmοuseοver="domouseover(this.style.backgroundColor)">'
}
colorTable=colorTable+'<td width=15 style="background-color:#000000">'
for (k=0;k<3;k++){
for (l=0;l<6;l++){
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" οnmοuseοver="domouseover(this.style.backgroundColor)">'
}
}
}
}
colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
+'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
+'<span style="float:left;color:#999999;">鼠标滑动显示色块选择颜色值</span>'
// +'<span style="float:right;padding-right:3px;cursor:pointer;" οnclick="colorclose()">×关闭</span>'
+'</td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
+colorTable+'</table>';
document.getElementById("colorpane").innerHTML=colorTable;
var current_x = document.getElementById("inputcolor").offsetLeft;
var current_y = document.getElementById("inputcolor").offsetTop;
document.getElementById("colorpane").style.left = current_x + "px";
document.getElementById("colorpane").style.top = current_y + "px";
}
function domouseleave(){
document.getElementById("container").style.display = "none";
}

function domouseover(obj){
document.getElementById("inputcolor").value=obj;
document.getElementById("colorpane").style.display = "block";
document.getElementById("container").innerHTML=obj;

document.onmousemove = function(e){
if(window.event) e = window.event;
var mydiv = document.getElementById("container");
mydiv.style.display = "block";
mydiv.style.left = e.clientX + 15 + "px";
mydiv.style.top = e.clientY + 15 + "px";

if(domouseover(obj)==false)
{ mydiv.style.display = "none";}
if(domouseover(obj)==true)
{return domouseleave();}

}
}
</script>
<div id="container"> </div>
<input name="color" type="text" id="inputcolor" />
<div id="colorpane" style="position:absolute;z-index:999;margin-top:20px;" οnmοuseleave="domouseleave()"></div>
</body>
</html>