会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
H.O.T
Hacker.Operate.Technology
博客园
首页
新随笔
联系
订阅
管理
系统颜色拾色器
这个拾色器在网上找的但不完善，存在一些兼容问题和功能缺陷，自己只做了一些修复，放上来以便日后查找
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style><!-- body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;} button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: courier new, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } .clear {clear:both;} html { overflow:-moz-scrollbars-vertical; } a { text-decoration: none;} a:hover { text-decoration: underline;} #Cl{border: solid 1px;cursor:default;position:absolute;width:188px;background:#ECE9D8;height:163px;font-size: 12px;text-align:right;} #Cl b{float:left;} #Cl6 input{width:28px;height:12px;font-size:12px;padding: 0px;line-height: 12px;font-family:Arial;border:1px solid #999;} #Cl div{position:absolute;} #Cl1{width:156px;left:3px;top:3px;} #Cl1 b{width:5px;line-height:5px;height:5px;overflow:hidden;} #Cl2{width:20px;left:163px;top:3px;} #Cl2 b{width:20px;line-height:5px;height:5px;overflow:hidden;} #Cl3{left:3px;width:20px;height:30px;top:85px;background:#Ff0000;border: inset 2px;border-right-width: 0px;} #Cl4{width:20px;height:30px;left:23px;top:85px;background:#Ff0000;border: inset 2px;border-left-width: 0px;} #Cl5{left:3px;top:117px;} #Cl6{width:110px;left:50px;top:85px;} #Cl7{width:20px;height:20px;position:absolute;text-align: center;-moz-user-select:none; hutia:expression(this.onselectstart=function(){return(false)});} #Cl8{width:20px;height:20px;position:absolute;left:160px;overflow:hidden;-moz-user-select:none; hutia:expression(this.onselectstart=function(){return(false)});} #Cl9{width:100px;left:3px;top:140px;} --></style> <script type="text/javascript"><!-- function $(i){return document.getElementById(i);} function position(el){//dom节点的绝对位置 if(el&&el.nodeType == 1) return {'left':el.getBoundingClientRect().left+document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top+document.documentElement.scrollTop}; } function sel(x,max){ if(x.value<0)x.value=0; if(x.value>max)x.value=max; } function adiv(v,i){ if(!$(i)){//生成外层容器 var div = document.createElement("DIV"); div.id = i; document.body.appendChild(div); } var pos=position(v);//定位 with($(i).style){ left=pos.left+"px"; top=pos.top+v.offsetHeight+"px"; display=""; } } function ToHex(n){//16进制转换 var hexStr = "0123456789ABCDEF"; return hexStr.charAt((n-n%16)/16)+hexStr.charAt(n%16); } var CL={//系统颜色选取 init:function(v){ adiv(v,"Cl");//生成新的div this.e=51,this.s=51,this.l=120,this.u='',this.t=0,this.d,this.v=v;//控制面板生成 $("Cl").innerHTML="<div id='Cl1' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'></div><div id='Cl2' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'></div><div id=Cl3></div><div id=Cl4></div><div id=Cl5></div><div id=Cl6> 色调:<input onKeyUp='CL.cs()'> 红:<input onKeyUp='CL.cs(1)'> 饱合:<input onKeyUp='CL.cs()'> 绿:<input onKeyUp='CL.cs(1)'> 亮度:<input onKeyUp='CL.cs()'> 蓝:<input onKeyUp='CL.cs(1)'></div><div id='Cl7' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'>╋</div><div id='Cl8' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'>━</div><div id='Cl9'><input type='button' value='确定' onclick='CL.setValue(1)' /> <input type='button' value='取消' onclick='CL.setValue()'/></div>"; if(v.value)$('Cl3').style.background = v.value; window.getSelection?window.getSelection().removeAllRanges() : document.selection.empty(); this.o=$("Cl6").getElementsByTagName("input"); this.esl('0x'+v.value.substring(1,3),'0x'+v.value.substring(3,5),'0x'+v.value.substring(5,7)); var u=[]; for(s = 240; s >= 0; s -=16){//左侧色调区域生成 for(e = 0; e <= 240; e +=8) u.push("<b title='"+e+","+s+"' style='background:"+this.rgb(e,s,120,true)+"'></b>"); } $("Cl1").innerHTML=u.join(''); u=null;//内存释放 this.ls(); this.c1_left=position($('Cl1')).left; this.c1_top=position($('Cl1')).top; }, mouseDown:function(e){ this.d = true; this.mouseMove(e); }, mouseUp:function(){ this.d = false; }, mouseMove:function(e,t){//选取坐标 e = e || window.event; if(this.d == true){ if(e.clientX<this.c1_left+$('Cl1').offsetWidth){ this.o[0].value=Math.floor((e.clientX-this.c1_left)*80/51); this.o[2].value=240-Math.floor((e.clientY-this.c1_top)*240/78); }else this.o[4].value=240-Math.floor((e.clientY-this.c1_top)*240/152); } this.ls(); sel(this.o[0],240); sel(this.o[2],240); sel(this.o[4],240); $("Cl7").style.left = this.o[0].value*51/80-6+ "px";; $("Cl7").style.top=(240-this.o[2].value)*78/240-6 + "px"; $("Cl8").style.top=(240-this.o[4].value)*152/240-5 + "px"; $("Cl8").style.color=this.o[4].value>120?"#000000":"FFFFFF"; if(!t) $("Cl5").innerHTML=this.rgb(this.o[0].value,this.o[2].value,this.o[4].value); else $("Cl5").innerHTML=this.rgb(this.o[0].value,this.o[2].value,this.o[4].value,true); $("Cl4").style.background=$("Cl5").innerHTML; }, rgb:function(e,s,l,x){//rgb三原色转换 var cnum='100110010011001101100',m=new Array,t = new Array,k='#'; m[0]=e/8%5,m[1]=Math.floor(e/40)*3,m[2]=m[1]+3; for(var i=0;i<3;i++){ t=(cnum.charAt(m[2]+i)*m[0]+cnum.charAt(m[1]+i)*(5-m[0]))*3.4*s/16+128-s*8.5/16 t=(l>120?2*t+(255-t)*l/120-255:(t*l)/120); k+=ToHex(t); if(!x) this.o[i*2+1].value=Math.floor(t) } return k; }, esl:function(r,g,b,t){//亮度色相饱和度的转换 var_R = ( r / 255 ); //转换公式 var_G = ( g/ 255 ); var_B = ( b/ 255 ); var var_Min = Math.min( var_R, var_G, var_B ); var var_Max = Math.max( var_R, var_G, var_B ); var del_Max = var_Max - var_Min; var L = ( var_Max + var_Min ) / 2; if ( del_Max == 0 ){ H = 0; S = 0; }else{ S= L<0.5?del_Max / ( var_Max + var_Min):del_Max / ( 2 - var_Max - var_Min ); del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max; del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max; del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max; if( var_R == var_Max ) H = del_B - del_G; else if ( var_G == var_Max ) H = ( 1 / 3 ) + del_R - del_B; else if ( var_B == var_Max ) H = ( 2 / 3 ) + del_G - del_R; if ( H < 0 ) H += 1; if(H >1) H -= 1; } this.o[0].value=Math.round(H*240); this.o[2].value=Math.round(S*240); this.o[4].value=Math.round(L*240); this.mouseMove("a",t); }, cs:function(t){//动态改变坐标选择 if(t==1){ sel(this.o[1],255); sel(this.o[3],255); sel(this.o[5],255); this.esl(this.o[1].value,this.o[3].value,this.o[5].value,true); }else this.mouseMove(); }, ls:function(){//右侧亮度选择区域生成 for(i=0;i<=240;i+=8) this.u+="<b title='"+(240-i)+"' style='background:"+ this.rgb(this.o[0].value,this.o[2].value,240-i,true) + "'></b>"; $("Cl2").innerHTML=this.u; this.u=''; }, setValue:function(t){//赋值给input if(t==1)this.v.value=$("Cl5").innerHTML; $("Cl").style.display="none" } } // --></script> </head> <body> <div style="margin:0 auto;width:300px;" _mce_style="margin: 0 auto; width: 300px;"> <br/><br/> <input name="str0" id="str0" type="text" value="#FF00FF" onfocus="CL.init(this);"/></div> </body> </html>
运行代码
posted @
2011-03-03 16:35
冰封e族
阅读(
227
) 评论(
0
)
编辑
收藏
举报
刷新页面
返回顶部
公告
