<!DOCTYPE HTML>
<html>
<head>
<style>
#colorpicker-yw {
width: 310px;
height: 230px;
background-color: #FBFBFB;
border: 1px solid #FDE436;
z-index:9999;
position:absolute;
}
#colorpicker-yw table {
width: 100px;
height: 100px;
float: left;
margin: 0;
padding: 0;
}
#colorpicker-yw table td {
border-color: white;
border-style: solid;
width: 15px;
height: 15px;
}
</style>
<script type="text/javascript">
(function() {
var yw = yw || {};
//模板函数
function template(temp, inner) {
return temp.replace(/\{(\w+)\}/g, function(a, b) {
if (typeof inner[b] == 'function') {
return inner[b]();
}
return inner[b];
});
}
//返回上一个节点
function prev(node,n){
n = n || 0;
var elem, i = 0;
while ((node = node.previousSibling)){
if (node.nodeType && node.nodeType == 1){
elem = node;
if (i == n) break;
i++;
}
}
return elem;
}
//得到DOM对象的位置
function getBox(el){
var x = y = 0, tmp =el;
do {
x += tmp.offsetLeft;
y += tmp.offsetTop;
}while(tmp = tmp.offsetParent);
return [x,y,el.offsetWidth,el.offsetHeight];
}
//rgb(0, 0, 0)转换为16进制
function rgbToColor(rgb){
var color = "";
var reg = new RegExp(/rgb\((\d{1,3})\,\s+(\d{1,3})\,\s+(\d{1,3})\)/gi);
var r = rgb.replace(reg,"$1 $2 $3").split(" ");
for(var i = 0; i < 3; i++) {
var num = parseInt(r[i]);
color += num < 16 ? "0" + num.toString(16) : num.toString(16);
}
return "#" + color.toUpperCase();
}
yw = {
init : function() {
//解决火狐存在的不传入参数，不识别Event
var e = arguments.callee.caller.arguments[0] || window.event;
this.parent = e.srcElement || e.target;
this.load(this.parent);
},
load : function(parent) {
if (this.colorContainer){
this.colorPanel.style.display = '';
}else{
this.create();
}
var position = getBox(parent);
this.colorPanel.style.top = position[1] + position[3] + "px";
this.colorPanel.style.left = position[0] + "px";
this.addEvent(this.colorContainer, 'click', click);
var that = this;
function click(e){
e = e || window.event;
var elem = e.srcElement || e.target;
if(elem.nodeName === 'TD'){
parent.setAttribute('value', rgbToColor(elem.style.backgroundColor));
that.colorPanel.style.display = 'none';
}
//移除当前事件，防止对象重复
that.removeEvent(that.colorContainer, 'click', click);
}
},
create : function() {
this.colorContainer = document.createElement('div')
var colorShow = document
.createElement('input'), colorBackground = document
.createElement('div');
this.colorPanel = document.createElement('div');
this.colorPanel.id = 'colorpicker-yw';
colorShow.style.cssText = 'width:60px;height:20px;float:left;';
colorShow.setAttribute('type', 'text');
colorShow.setAttribute('value', '#111111');
colorBackground.style.cssText = 'width:50px;margin-top:3px;height:20px;float:left;background-color:#444444;margin-left:50px;';
document.body.appendChild(this.colorPanel);
this.colorContainer.innerHTML = this.color();
this.colorPanel.appendChild(colorShow);
this.colorPanel.appendChild(colorBackground);
this.colorPanel.appendChild(this.colorContainer);
var that = this;
this.addEvent(this.colorContainer, 'mousemove', debounce(move, 10));
that.tableArray = this.colorContainer.getElementsByTagName('table');
function move(e) {
e = e || window.event;
var elem = e.srcElement || e.target;
if (that.elem && that.elem !== elem) {
changeBorder(that.elem, 'white');
}
that.elem = elem;
changeBorder(elem, 'black');
stop(e);
}
function changeBorder(elem, color){
if(elem.nodeName !== 'TD') return ;
var prevNode = prev(elem);
prevNode&&(prevNode.style.borderRightColor = color);
var overIndex = elem.getAttribute("index");
var z = Math.ceil(overIndex / 36);
var x = Math.ceil((overIndex%36) / 6) == 0 ? 6 : Math.ceil((overIndex%36) / 6);
var y = (overIndex%36) % 6 == 0 ? 6 : (overIndex%36) % 6;
if(x >= 2){
that.tableArray[z - 1].rows[x - 2].cells[y - 1].style.borderBottomColor = color;
}
if(!(z == 1 || z == 4) && y == 1){
that.tableArray[z - 2].rows[x - 1].cells[5].style.borderRightColor = color;
}
if(z > 3 && x == 1){
that.tableArray[z - 4].rows[5].cells[y - 1].style.borderBottomColor = color;
}
elem.style.borderColor = color;
colorBackground.style.backgroundColor = elem.style.backgroundColor;
colorShow.setAttribute('value', rgbToColor(elem.style.backgroundColor));
}
//阻止事件冒泡
function stop(e) {
e = e || window.event;
if (e.stopPropagation) { //W3C
e.stopPropagation();
} else {
e.cancelBubble = true; //IE
}
}
//函数去抖
function debounce(func, wait) {
var timeout, result;
return function() {
var context = this, args = arguments;
var later = function() {
result = func.apply(context, args);
}
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
}
/**
取消默认事件事件
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意：这个地方是无法用return false代替的
//return false只能取消元素
}
}
*/
},
locate : function() {
},
color : function() {
var tdTemp = "<td index='{index}' style='background-color:{fixColor};border-width:{fixWidth}'></td>";
var colorTable = [ "<div style = 'clear:both;'>", "</div>" ];
var rcolor = 0, dcolor, bcolor = 0;
for ( var p = 0; p < 6; p++) {
var colorArr = [ "<table cellspacing='0' cellpadding='0'>",
"</table>" ];
rcolor = bcolor;
for ( var i = 0; i < 6; i++) {
dcolor = rcolor;
var tempRow = [ "<tr>", "</tr>" ];
for ( var j = 0; j < 6; j++) {
var fixNum = dcolor.toString(16), fixColor = "", fixWidth = ['0','1px','1px','0'];
fixColor = "000000" + fixNum;
fixColor = "#"
+ fixColor.substr(fixColor.length - 6,
fixColor.length);
if (p < 3 && i == 0){
fixWidth[0] = '1px';
}
if ((p == 0 || p == 3) && j == 0){
fixWidth[3] = '1px';
}
tempRow.splice(j + 1, 0, template(tdTemp, {
fixColor : fixColor,
fixWidth : fixWidth.join(" "),
index : p*36 + i * 6 + j + 1
}));
dcolor += 13056; //3300 3*16*16*16+3*16*16
}
colorArr.splice(i + 1, 0, tempRow.join(""));
rcolor += 51; //33
}
bcolor += 3342336; //330000
colorTable.splice(p + 1, 0, colorArr.join(""));
}
return colorTable.join("");
},
addEvent : function(elem, type, func) {
if (elem.addEventListener) {
elem.addEventListener(type, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, func);
}
},
removeEvent : function(elem, type, func) {
if (elem.removeEventListener) {
elem.removeEventListener(type, func, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, func);
}
}
};
window.ywColorPicker = yw;
})();
</script>
</head>
<body>
<input style = "width:100px;" id = "a" onclick = "ywColorPicker.init();"/>
<input style = "width:100px;" id = "b" onclick = "ywColorPicker.init();"/>
<p>测试位置</p>
<p>测试位置</p>
测试位置位置<input style = "width:100px;" id = "b" onclick = "ywColorPicker.init();"/>
</body>
</html>
颜色选择器（一）
最新推荐文章于 2021-08-03 11:28:38 发布
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
