符合标准的页面颜色选择（器）js插件页面特效__脚本特效

符合标准的页面颜色选择（器）js插件

时间： 2008-10-16 07:31:54　阅读次数：2889

符合标准的页面颜色选择（器）js插件

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>颜色对话框</title>

</head>

<body>

请点击文本框：

colorTable=colorTable+'<td width="11" style="background-color:#000000"></td>'
 for (k=0;k<3;k++)
 {
 for (l=0;l<6;l++)
 {
 colorTable=colorTable+'<td width="11" style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'"></td>'
 }
 }
 colorTable=colorTable+'</tr>'
 }
}
colorTable='<table width="253" border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
 +'<tr height=30>'
 +'<td colspan=21 bgcolor=#cccccc>'
 +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
 +'<tr>'
 +'<td><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
 +'<td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>'
 +'</tr>'
 +'</table>'
 +'</td></tr><tr><td>'
 +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:hand;" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick(\''+TipId+'\')" >'
 +colorTable+'</table>' 
 +'</td></tr></table>' ;

var o = document.body;
                        var div = document.createElement("div");
                        div.id = TipId+"Tip";
                        div.innerHTML = colorTable;
                        div.style.position = "absolute";
                        div.style.width = "253px";
                        div.style.height = "177px";
                        div.onmouseout = function(){t=setTimeout("dd('"+TipId+"Tip')",50)};
                        div.onmouseover = function(){clearTimeout(t)};
                        div.style.backgroundColor = "#ff0000";
                        o.appendChild(div);
}

function dd(id)
{
        var obj
        obj = document.getElementById(id);
        if(obj)document.body.removeChild(obj);
}

function aa(obj)
{
        var ColorDiv=obj.getAttribute("id")+"Tip";
        var objTip = document.getElementById(ColorDiv);
        if (objTip)
        {
                document.body.removeChild(objTip);
        }
}

//此函数已被千一网络修改 www.cftea.com
//将颜色值字母大写
function doOver() {
      if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
        if (current!=null){current.style.backgroundColor = current._background}     
        event.srcElement._background = event.srcElement.style.backgroundColor
        DisColor.style.backgroundColor = event.srcElement.style.backgroundColor
        HexColor.value = event.srcElement.style.backgroundColor.toUpperCase();
        event.srcElement.style.backgroundColor = "white"
        current = event.srcElement
      }
}

//此函数已被千一网络修改 www.cftea.com
//将颜色值字母大写
function doOut() {

if (current!=null) current.style.backgroundColor = current._background.toUpperCase();
}

//此函数已被千一网络修改 www.cftea.com
function doclick(Id)
{
        var targetElement = document.getElementById(Id);
    if (event.srcElement.tagName == "TD")
    {
        var clr = event.srcElement._background;
        clr = clr.toUpperCase(); //将颜色值大写
        if (targetElement)
        {
            //给目标无件设置颜色值
            targetElement.value = clr;
        }
        DisplayClrDlg(targetElement,false);
        return clr;
    }
}

//显示颜色对话框
//display 决定显示还是隐藏
//自动确定显示位置
function DisplayClrDlg(obj,display)
{
 var ColorDiv=obj.getAttribute("id")+"Tip";
 var objTip = document.getElementById(ColorDiv);
 if(display == null) display = true;
 if(objTip == null)
 {
 intocolor(obj.getAttribute("id"));
 objTip = document.getElementById(ColorDiv); 
 }
 
 if (display)
 {
 var left = document.body.scrollLeft + event.clientX-10;
 var top = document.documentElement.scrollTop + event.clientY-10;
 
 if (event.clientX+objTip.style.pixelWidth > document.body.clientWidth)
 {
 //对话框显示在鼠标右方时，会出现遮挡，将其显示在鼠标左方
 left -= objTip.style.pixelWidth;
 }
 if (event.clientY+objTip.style.pixelHeight > document.documentElement.clientHeight)
 {
 //对话框显示在鼠标下方时，会出现遮挡，将其显示在鼠标上方
 top -= objTip.style.pixelHeight;
 }
 
 objTip.style.pixelLeft = left;
 objTip.style.pixelTop = top;
 }
 else
 {
 if(objTip)
 {
 document.body.removeChild(objTip);
 }
 }
}
-->
</script> 
</body>
</html>

提示：您可以先修改部分代码再运行