function getColor(e){
obj = document.all ? event.srcElement : e.target;
obj.style.position = "relative";
var inputTop = getTop(obj);
var inputLeft = getLeft(obj);
var htmlStr = "visibility:visible;position:absolute;";
//
var colorPacker = document.getElementById("colorPacker");
var colorPackerShadow = document.getElementById("colorPackerShadow");
if (!colorPacker) {
colorPacker = document.createElement("div");
colorPackerShadow = document.createElement("div");
colorPacker.id = "colorPacker";
colorPackerShadow.id = "colorPackerShadow";
colorPacker.style.cssText = htmlStr;
colorPackerShadow.style.cssText = htmlStr+"opacity:0.3;filter:alpha(opacity=20);";
colorPacker.style.zIndex = 34535;
colorPackerShadow.style.zIndex = 34534;
colorPacker.style.backgroundColor = "#6997EF" ;
colorPackerShadow.style.backgroundColor = "#000000" ;
colorPacker.style.height = "115px";
colorPackerShadow.style.height = "115px";
colorPacker.style.width = "165px";
colorPackerShadow.style.width = "165px";
var titleStyle = "width:95%;background:#6997EF;color:#ffffff;font-size:12px;margin-left:5px;";
var contetnStyle = "width:95%;text-align:center;margin:auto;background:#6997EF;" ;
var colorPackerTitle = "<div style='"+titleStyle+"'>取色器</div>" ;
var colorPackerContent = "<div style='"+contetnStyle+"'>"+bulid()+"<div>" ;
document.body.appendChild(colorPacker);
document.body.appendChild(colorPackerShadow);
colorPacker.innerHTML = colorPackerTitle+ colorPackerContent;
}
else {
document.getElementById("colorPacker").style.visibility = "visible";
document.getElementById("colorPackerShadow").style.visibility = "visible";
}
colorPacker.style.left = (inputLeft) + "px";
colorPacker.style.top = (inputTop + obj.clientHeight) + "px";
colorPackerShadow.style.left = (inputLeft+2) + "px";
colorPackerShadow.style.top = (inputTop + obj.clientHeight+2) + "px";
if(!colorPacker.onclick){
colorPacker.onclick = function(oEvent){
e = oEvent || window.event;
var ev = document.all ? event.srcElement : e.target ;
obj.style.backgroundColor = ev.bgColor;
this.style.visibility = "hidden";
document.getElementById("colorPackerShadow").style.visibility = "hidden";
if (document.all) {
e.cancelBubble = true;
}
else {
e.stopPropagation();
}
};
}
if(!document.all){
colorPacker.setAttribute('flag','flag');
colorPackerShadow.setAttribute('flag','flag');
obj.setAttribute('flag','flag');
}else{
colorPacker.flag = "flag";
colorPackerShadow.flag = "flag";
obj.flag = "flag";
}
if(!document.onclick){
document.onclick = function(e){
var ev = document.all ? event.srcElement : e.target ;
if (ev.getAttribute("flag")==null){
document.getElementById("colorPacker").style.visibility = "hidden";
document.getElementById("colorPackerShadow").style.visibility = "hidden";
}
};
}
}
var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
function ToHex(n){
var h, l;
n = Math.round(n);
l = n % 16;
h = Math.floor((n / 16)) % 16;
return (hexch[h] + hexch[l]);
}
function DoColor(c, l){
var r, g, b;
r = '0x' + c.substring(1, 3);
g = '0x' + c.substring(3, 5);
b = '0x' + c.substring(5, 7);
if (l > 120) {
l = l - 120;
r = (r * (120 - l) + 255 * l) / 120;
g = (g * (120 - l) + 255 * l) / 120;
b = (b * (120 - l) + 255 * l) / 120;
}
else {
r = (r * l) / 120;
g = (g * l) / 120;
b = (b * l) / 120;
}
return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}
function wc(r, g, b, n){
r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
return '<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=6 width=6></TD>';
}
function bulid(){
var trStr = "<table CELLPADDING=0 CELLSPACING=0>";
for (i = 0; i < 16; i++) {
trStr += '<TR>';
for (j = 0; j < 30; j++) {
n1 = j % 5;
n2 = Math.floor(j / 5) * 3;
n3 = n2 + 3;
trStr += wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)), (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)), (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
}
trStr += '</TR>';
}
trStr += "</table>";
return trStr;
}
function getTop(e){
var offset = e.offsetTop;
if (e.offsetParent != null)
offset += getTop(e.offsetParent);
return offset;
}
function getLeft(e){
var offset = e.offsetLeft;
if (e.offsetParent != null)
offset += getLeft(e.offsetParent);
return offset;
}
getColor这个接口可以绑定于一个html控件之上,实现该控件的背影色变化,颜色算法是从网上一个控件改来的。如果是直接在页面上调用getColor则必须使用getColor(event)方式,不然在firefox下不能使用该控件。目前没有黑色与白色的选择,因为方案还没有确定。
第一次发控件,有不足之处,多多指教。
分享到:
相关推荐
这是一个纯js实现的日期选择控件,页面效果不错
C#调色板取色器控件,自定义控件。类似Photoshop,效果请看此图:http://img.my.csdn.net/uploads/201207/18/1342599609_4295.png
日期控件 纯js 日期控件 纯js日期控件 纯js日期控件 纯js
WDSPY取色取控件名称.rarWDSPY取色取控件名称.rarWDSPY取色取控件名称.rar
采用kotlin代码实现,代码简单易懂,采用接口方式回调结果,已经封装好,方便移植。具有以下特性: 1、支持点击选色,滑动选色,且支持实时预览 2、颜色分解为Alpha及RGB 四通道 更加直观 3、支持4通道分别调色,...
一个值得推荐的漂亮的基于纯JS及时实现的颜色选择控件源码例子
一个不错的js实现的日期控件。看例子直接就会用了。简单。
用js实现的日期控件,只需要包含js即可,应用方便
js实现日期选择控件,准确方便在文本框输入日期,演示,源代码
js移动端日期时间选择控件 javascript 原生js 日期选择控件
JS日期控件JS日期控件JS日期控件JS日期控件JS日期控件
HTML页面导入此JS,然后如上JS中说明的申明,然后调用getDateString就可以使用了
自定义控件-颜色取色器.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
js日期控件js日期控件js日期控件js日期控件
office 2007 Ribbon控件,很漂亮的界面,模仿office2007,纯代码实现
不需要任何环境前提 实现时间控件
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
用javascript实现的年月日控件,在web应用中能够很好地完成对时间的操作
js日历控件 js日历控件 js日历控件 js日历控件 js日历控件
一个纯js实现的日历控件a JavaScript Calendar Control 在嵌套网页的使用例子。http://www.linjon.cn, 成都领君科技有限公司