liudaoru
- 浏览: 1557970 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
nich002：
原网站失效了。撸主简单粗暴的复制过来，可读性极差！差评！
Apache配置详解(最好的APACHE配置教程) -
107x：
不错，谢谢！
LINUX下查看文件夹下的文件个数! -
Hypereo：
好你妹，连个格式都没有！
Apache配置详解(最好的APACHE配置教程) -
resteater：
代码排版感觉有点乱！收发信息代码可读性不强！请问第一次发服务器 ...
java socket例子 -
resteater：
代码排版感觉有点乱！收发信息代码可读性不强！请问第一次发服务器 ...
java socket例子
学习。。。。。。。
-----------------------
-----------------------
<!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[0] instanceof Event) return o.arguments[0];
} 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[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
var $ni, $nf;
if (b.constructor != Array) { $ni = $nf = b; }
else { $ni = b[0], $nf = b[1]; }
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[0], $nf = b[1]; }
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 : [1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0],
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[i].nodeType != 3) {
if (os[i].className == "Color_left") wc.body.left = os[i];
else if (os[i].className == "Color_right") wc.body.right = os[i];
else if (os[i].className == "Color_text") wc.body.text = os[i];
else if (os[i].className == "Color_back") wc.body.back = os[i];
}
},
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[h] + wc.hexch[l]);
},
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[0]) + wc.toT16(a[1]) + wc.toT16(a[2]);
}
},
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[pro] == 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[pro]) with (wc.moveobj[pro].style) { height = att.pre[0], width = att.pre[1], border = att.pre[2]; }
wc.moveobj[pro] = obj;
if (wc.moveobj[pro]) with (wc.moveobj[pro].style) { height = att.nex[0], width = att.nex[1], border = att.nex[2]; }
}
},
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[i] = 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[15].childNodes[0]);
}
},
move : function () {
//鼠标移动的时候
var wc = this, e = window.event, td = wc.moveobj.nonce = e.srcElement;
if (/^(?!Color_td)/.test(td.className)) return;
else {
if (arguments[0]) 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[f + "Sibling"](moveobj.right.parentNode);
if (x) wc.setMoveobj("right", wc.moveobj.nonce = x.childNodes[0]);
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.nonce.pro] = wc.foColor(wc.moveobj.nonce.style.backgroundColor);
wc.color.style.display = "none";
wc.parse(wc.moveobj.nonce = wc.body.left.childNodes[0].childNodes[0]);
wc.setMoveobj("left", wc.moveobj.nonce);
wc.setMoveobj("right", right = wc.body.right.childNodes[15].childNodes[0]);
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[j] = wc.toColor(
wc.cnum[n3] * n1 + wc.cnum[n2] * (5 - n1)
, wc.cnum[n3 + 1] * n1 + wc.cnum[n2 + 1] * (5 - n1)
, wc.cnum[n3 + 2] * n1 + wc.cnum[n2 + 2] * (5 - n1)
, i
);
}
tr[i] = '<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[0].childNodes[0]);
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>
<!--取色器 结束-->
<input onclick="wc.show(this, 'value')" readonly="readonly" />
<div onclick="wc.show(this, 'innerHTML')" style="width:100px; height:20px;text-align:center; border:#000000 1px solid;"></div>
</body>
</html>
分享到：
发表评论
-
几个不错的ff下调试插件
2009-12-11 11:14 1819记录一下经常使用的ff插件，其中firebug、switchh ... -
20 种提升网页速度的技巧
2009-04-15 20:19 1200From：http://www.ibm.com/develop ... -
25 个在 Web 中嵌入图表的免费资源
2009-04-14 21:27 1620From: http://www.cnbeta.com/art ... -
15个网站用户体验优化禁忌
2009-04-08 22:57 1130From：http://www.blueidea.com/de ... -
让IE8兼容IE7
2009-03-27 15:10 3948今天在搜狐首页发现：<meta http-equiv ... -
FF下分析页面加载的工具
2009-03-25 16:03 2423今天同事推荐YSlow作为 ... -
IE6下页面显示空白的问题
2009-03-24 17:01 5268今天又碰到了一个页面在IE6下加载完后一片空白的问题，而且页面 ... -
支持IE6、IE7的关闭页面的函数
2009-03-17 15:40 1655function closeWin() { var isI ... -
很弱很无奈的一段代码（打开的页面更新父窗口的链接）
2009-03-12 11:51 991if(parent.window.opener) { pa ... -
js小脚本
2009-02-26 10:13 1499清除元素： var clearNode = functio ... -
处理一次性事件的模式
2009-02-12 20:20 1197有的时候我们需要给一个标签增加一次性的事件，比如先在输入框中增 ... -
Linux：rsync服务器的快速搭建和使用
2008-12-30 10:15 1280From: http://tech.ddvip.com/200 ... -
js导致的页面空白问题
2008-12-29 13:45 3073今天遇到一个很奇怪的问题，系统的一个页面在一台机器上无法完全展 ... -
IE6下history.back无效的问题
2008-12-26 23:56 3748解决IE6中history.back()无法返回的问题：< ... -
浏览器兼容比较好的设置min-width的方式
2008-12-12 18:45 2501<!DOCTYPE HTML PUBLIC " ... -
CSS代码分享：浏览器CSS Reset方法十例zz
2008-12-07 18:06 1114From: http://www.52css.com/arti ... -
在Javascript中，什么是闭包(Closure)
2008-12-02 11:11 1011from: http://javascript.chinaht ... -
Unicode、GB2312、GBK和GB18030中的汉字[转]
2008-11-25 15:22 3806From: http://blog.csdn.net/fmdd ... -
空字符串的split
2008-11-21 19:16 1528本来以为是零，但是在java和js里试了以后发现居然都是1，很 ... -
docType 相关的loose.dtd导致的无法获取scrollTop的解决
2008-11-19 11:32 1630function iecompattest(){ retu ...
相关推荐
web颜色拾取工具，主要用户提取颜色，格式有RGB,HEX,HSB,CMYK等多种形式的颜色代码。
颜色拾取器（又名取色板）是为了方便用户在一些需要使用颜色的WEB应用中直观的选择所需的颜色，如论坛发帖时使用的编辑器中就应用到了颜色拾取器。本文将给大家介绍一款非常好用的基于jQuery的颜色拾取器，它可以...
弹出颜色拾取框自动拾取 选择颜色可自动拾取！可在web页面自定获取颜色！
做Web的经常要从屏幕上取颜色，分享一个在用的很不错的颜色拾取器。
一个基于dhtml+js实现的Web颜色拾取控件colorpicker，采用纯js实现，功能强大，界面美观。
颜色拾取比较好用,下载试试! 颜色拾取比较好用,下载试试!
颜色拾取器
腾讯地图api和layui结合实现的腾讯地图坐标拾取器 可回调选择结果 layui.config({ base: './' }).use(["addrHelper"], function() { const addrHelper = layui.addrHelper const layer = layui.layer // 打开坐标...
Web开发必备,Html参考大全、CSS参考大全+颜色拾取器(前台开发必备)
能轻松获取各种WEB颜色代码！是网页制作的必备工具！
Web颜色选择器
网页颜色提取器 web形式 网页颜色提取器 web形式 网页颜色提取器 web形式 网页颜色提取器 web形式 网页颜色提取器 web形式 网页颜色提取器 web形式
一个基于jquery的web端 颜色选择器，漂亮、美观、大气，兼容各大浏览器，欢迎大家下载使用，谢谢。
一款应用JQuery的web颜色拾取代码
PC端的颜色拾取工具 类似颜色吸管 可以拾取颜色的色值，不管是web浏览器还是 pc应用程序 都可以拾取颜色色值
这个是WEB前端设计开发应用到的绿色的颜色选取软件
由于做网页时，经常为挑选颜色而苦恼，这个工具能帮助您查找您想要的颜色，实时显示颜色的值！
Web组件颜色选择器
WEB\web安全.7zWEB\web安全.7z
Web Tours 1.0.7z安装包