web颜色拾取器[z]
学习。。。。。。。-----------------------
<!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=gb2312" /><title>Color</title><style type="text/css">#Color { width:282px; height:156px; padding:10px; background-color:#F4F4F4; border:#CCCCCC 1px solid; position:absolute; display:none;}#Color .Color_left { float:left; clear:left;}#Color .Color_right { float:right; clear:right; width:32px; text-align:center;}#Color .Color_tr { clear:both;}#Color .Color_td_L, #Color .Color_td_R { cursor:pointer;}#Color .Color_td_L { float:left; width:8px; height:8px; overflow:hidden;}#Color .Color_td_R { width:25px; height:4px; overflow:hidden; margin:auto;}#Color .Color_back, #Color .Color_text { margin-top:8px;}#Color .Color_back { float:left; width:60px; height:18px; overflow:hidden; border:#000000 1px solid; cursor:pointer;}#Color .Color_text { float:right; line-height:18px; overflow:hidden; font-size:14px;}</style><script type="text/javascript">(function (bool) {//兼容FF一些方法 var html; window.IE = /MSIE/.test(window.navigator.userAgent); window.FF = bool; if (bool) { html = window.HTMLElement.prototype; window.__defineGetter__("event", function () { //兼容Event对象 var o = arguments.callee; do { if (o.arguments instanceof Event) return o.arguments; } while (o = o.caller); return null; }); Event.prototype.__defineGetter__("srcElement", function () { //兼容Event.srcElement对象 var n = this.target; while (n.nodeType != 1) n = n.parentNode; return n; }); MouseEvent.prototype.__defineGetter__("wheelDelta", function () { //返回鼠标滚轮状态 return this.detail * -1; }); html.__defineSetter__("className", function (t_v) { this.setAttribute("class", t_v); }); html.__defineGetter__("className", function () { return this.getAttribute("class"); }); } })(/Firefox/.test(window.navigator.userAgent));var Class = {//创建类 create : function () { return function () { this.initialize.apply(this, arguments); }; }};var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var $A = function (a) {//转换数组 return a ? Array.apply(null, a) : new Array;};Function.prototype.bind = function () {//绑定事件 var wc = this, a = $A(arguments), o = a.shift(); return function () { wc.apply(o, a.concat($A(arguments))); };};Object.extend = function (a, b) {//追加方法 for (var i in b) a = b; return a;};Object.extend(Object, { addEvent : function (a, b, c, d) { //添加函数 var $ni, $nf; if (b.constructor != Array) { $ni = $nf = b; } else { $ni = b, $nf = b; } if (a.attachEvent) a.attachEvent($ni, c); else a.addEventListener($nf.replace(/^on/, ""), c, d || false); return c; }, delEvent : function (a, b, c, d) { //删除函数 var $ni, $nf; if (b.constructor != Array) { $ni = $nf = b; } else { $ni = b, $nf = b; } if (a.detachEvent) a.detachEvent($ni, c); else a.removeEventListener($nf.replace(/^on/, ""), c, d || false); return c; } });var Color = Class.create();Color.prototype = {//颜色摄取类，颜色算法偷滴说。。。:D hexch : ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'], cnum : , initialize : function (color) { //初始化参数 var wc = this; wc.color = color; wc.rgb = ""; wc.event = { keydown : null }; wc.nonce = { obj : null, pro : null }; wc.body = { left : null, right : null, text : null, back : null }; wc.moveobj = { left : null, right : null, nonce : null }; }, load : function () { //加载构造 var wc = this, os = wc.color.getElementsByTagName("div"), i = 0; for (; i < os.length ; i ++) if (os.nodeType != 3) { if (os.className == "Color_left") wc.body.left = os; else if (os.className == "Color_right") wc.body.right = os; else if (os.className == "Color_text") wc.body.text = os; else if (os.className == "Color_back") wc.body.back = os; } }, toHex : function (n) { //转换成16进制 var wc = this, h, l; n = Math.round(n), l = n % 16, h = Math.floor((n / 16)) % 16; return (wc.hexch + wc.hexch); }, toColor : function (r, g, b, n) { //不知 var wc = this , r = ((r * 16 + r) * 3 * (15 - n) + 128 * n) / 15 , g = ((g * 16 + g) * 3 * (15 - n) + 128 * n) / 15 , b = ((b * 16 + b) * 3 * (15 - n) + 128 * n) / 15; return wc.toHex(r) + wc.toHex(g) + wc.toHex(b); }, doColor : function (l) { //不知 var wc = this, c = wc.rgb, 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 wc.toHex(r) + wc.toHex(g) + wc.toHex(b); }, foColor : function (c) { //把ff的背景转换掉 var wc = this, a; if (c.indexOf("#") > -1) return c; else { a = c.match(/\d+/g); return "#" + wc.toT16(a) + wc.toT16(a) + wc.toT16(a); } }, toT16 : function (i) { //补充十位 var s = parseInt(i).toString(16); return ("0" + s).substr(s.length - 1); }, offset : function (o) { //设置定位 var $x = $y = 0; do { $x += o.offsetLeft, $y += o.offsetTop; } while (o = o.offsetParent); return { x : $x, y : $y }; }, setMoveobj : function (pro, obj) { //设置当前选中对象的样式 var wc = this, att; if (wc.moveobj == obj) return; else { att = { pre : [], nex : [] }; if (pro == "right") { att.pre = ["4px", "25px", "none"], att.nex = ["6px", "30px", "#000000 1px solid"]; } else { att.pre = ["8px", "8px", "none"], att.nex = ["6px", "6px", "#000000 1px solid"]; } if (wc.moveobj) with (wc.moveobj.style) { height = att.pre, width = att.pre, border = att.pre; } wc.moveobj = obj; if (wc.moveobj) with (wc.moveobj.style) { height = att.nex, width = att.nex, border = att.nex; } } }, nextSibling : function (obj) { //获取下一个对象 do { obj = obj.nextSibling; } while (obj && obj.nodeType == 3); return obj; }, previousSibling : function (obj) { //获取前一个对象 do { obj = obj.previousSibling; } while (obj && obj.nodeType == 3); return obj; }, parse : function (obj) { //生成右边的颜色值 var wc = this, color = wc.foColor(obj.style.backgroundColor), a, i; if (wc.rgb == color) return; else { a = [], wc.rgb = color; for (i = 0 ; i <= 30 ; i ++) a = wc.doColor(240 - i * 8); wc.body.right.innerHTML = '<div class="Color_tr"><div class="Color_td_R" style="background-color:#' + a.join(';"><\/div><\/div><div class="Color_tr"><div class="Color_td_R" style="background-color:#') + ';"><\/div><\/div>'; wc.setMoveobj("left", obj); wc.setMoveobj("right", wc.body.right.childNodes.childNodes); } }, move : function () { //鼠标移动的时候 var wc = this, e = window.event, td = wc.moveobj.nonce = e.srcElement; if (/^(?!Color_td)/.test(td.className)) return; else { if (arguments) wc.parse(td); if (td.className == "Color_td_R") wc.setMoveobj("right", td); wc.setInfo(); } if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; }, wheel : function () { //鼠标滚轮滚动的时候 var wc = this, e = window.event, moveobj = wc.moveobj, f = (e.wheelDelta > 0 ? "previous" : "next"), x = wc(moveobj.right.parentNode); if (x) wc.setMoveobj("right", wc.moveobj.nonce = x.childNodes); wc.setInfo(); }, enter : function (bool) { //确认的时候 var wc = this, e = window.event; if ((e.type != "keydown" && /^(?!Color_td)/.test(e.srcElement.className)) || (e.type == "keydown" && (e.which || e.keyCode) != 13)) return; wc.nonce.obj = wc.foColor(wc.moveobj.nonce.style.backgroundColor); wc.color.style.display = "none"; wc.parse(wc.moveobj.nonce = wc.body.left.childNodes.childNodes); wc.setMoveobj("left", wc.moveobj.nonce); wc.setMoveobj("right", right = wc.body.right.childNodes.childNodes); wc.setInfo(); Object.delEvent(document, "onkeydown", wc.event.keydown); wc.event.keydown = null; }, setInfo : function (obj) { //设置路过的颜色信息 var wc = this, color = wc.foColor(wc.moveobj.nonce.style.backgroundColor); wc.body.text.innerHTML = color, wc.body.back.style.backgroundColor = color; }, show : function (obj, pro) { //显示菜单 var wc = this, pos = wc.offset(obj); if (!wc.moveobj.nonce) wc.init(); wc.nonce.obj = obj, wc.nonce.pro = pro; with (wc.color.style) { left = pos.x + "px", top = obj.offsetHeight + pos.y + "px", display = "block"; } if (!wc.event.keydown) wc.event.keydown = Object.addEvent(document, "onkeydown", wc.enter.bind(wc)); }, init : function () { //生成颜色表，并且添加方法 var wc = this, i = j = n1 = n2 = n3 = 0, tr = [], td = []; wc.color = document.getElementById(wc.color); wc.load(); for (; i < 16 ; i ++) { for (b = [], j = 0 ; j < 30 ; j ++) { n1 = j % 5, n2 = Math.floor(j / 5) * 3, n3 = n2 + 3; td = wc.toColor( wc.cnum * n1 + wc.cnum * (5 - n1) , wc.cnum * n1 + wc.cnum * (5 - n1) , wc.cnum * n1 + wc.cnum * (5 - n1) , i ); } tr = '<div class="Color_td_L" style="background-color:#' + td.join(';"><\/div><div class="Color_td_L" style="background-color:#') + ';"><\/div>'; } wc.body.left.innerHTML = '<div class="Color_tr">' + tr.join('<\/div><div class="Color_tr">') + '<\/div>'; wc.parse(wc.moveobj.nonce = wc.body.left.childNodes.childNodes); wc.setInfo(); Object.addEvent(wc.body.left, "onmousemove", wc.move.bind(wc, false)); Object.addEvent(wc.body.left, "onmousedown", wc.move.bind(wc, true)); Object.addEvent(wc.body.right, "onmousedown", wc.move.bind(wc, false)); Object.addEvent(wc.body.right, ["onmousewheel", "DOMMouseScroll"], wc.wheel.bind(wc)); Object.addEvent(wc.body.left, "ondblclick", wc.enter.bind(wc)); Object.addEvent(wc.body.right, "ondblclick", wc.enter.bind(wc)); } };var wc = new Color("Color");</script></head><body><!--取色器 开始--><div id="Color"> <div class="Color_left"></div> <div class="Color_right"></div> <div> <div class="Color_back"></div> <div class="Color_text"></div> </div></div><!--取色器 结束--><inputreadonly="readonly" /><divstyle="width:100px; height:20px;text-align:center; border:#000000 1px solid;"></div></body></html>
页:
[1]