- 浏览: 236484 次
- 性别:
- 来自: 南京
最新评论
-
gonglil:
貌似不行呢?
java 字符串和二进制相互转换 -
robingdo:
这样关闭proxool连接池以后,项目没报那个错,但是数据库用 ...
Proxool连接池在reload web容器时出现HouseKeeper的空指针异常 -
xb12369:
ezfantasy 写道lord_is_layuping 写道 ...
Java忽略大小写替换和提取字符信息 -
ezfantasy:
lord_is_layuping 写道不区分大小写应该是(?i ...
Java忽略大小写替换和提取字符信息 -
狂盗一枝梅:
hex2byte函数功能是转换成十六进制吧?上面写的是转换成二 ...
java 转换图片为字符串,将字符串转换成图片显示
JavaScript仿 Photoshop 拾色器
<!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=UTF-8" /> <title> photoshop风格拾色器 </title> <base href="http://code.js.cn/links/"> <style> html,body{margin:0;font-size:12px;} #pscolor_win{border:1px solid #666;width:163px;overflow:hidden;position:absolute;left:100px;top:100px;background:#D4D0C8;display:none;} #psc_preview{height:20px;width:55px;background:red;float:left;display:inline;margin:5px;margin-bottom:0;border:1px inset #fff;} #psc_new{height:100%;width:50%;background:red;} #psc_value{height:18px;width:60px;border:1px solid #aaa;vertical-align:middle;display:block;float:left;margin:5px 5px 0 0;} #color_out{display:block;width:20px;height:20px;background:url(color_out.gif) no-repeat 50% 50%;margin:5px 0 0 0;float:left;} #color_out:hover{border:1px solid #999;border-left-color:#fff;border-top-color:#fff;} #psc_range{position:relative;width:128px;height:128px;border:1px inset #fff;margin:5px;overflow:hidden;background:red;float:left;display:inline;} #psc_range div{position:absolute;left:0;top:0;width:128px;height:128px;_background:none;} #w_mask{background:url(white_mask.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://code.js.cn/links/white_mask.png',sizingMethod='scale');} #b_mask{background:url(black_mask.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://code.js.cn/links/black_mask.png',sizingMethod='scale');} #psc_slider{margin:5px 0;background:url(color_slider.png) no-repeat 50% 0;width:19px;height:128px;position:relative;float:left;} #psc_slider div{border:1px inset #fff;margin:0 auto; width:9px; height:100%;} #psc_cursor{display:block;width:7px;height:7px;background:url(select_pos.gif) no-repeat;font-size:12px;overflow:hidden;position:absolute;right:-2px;top:-2px;} #psc_mark{display:block;width:42px;height:9px;background:url(color_pos.gif) no-repeat;position:absolute;left:0;top:0;} .clear{clear:both;font-size:0;height:0;overflow:hidden} </style> </head> <body> <br/><br/><br/><br/><br/><br/><br/> <h1>简单的仿Photoshop的颜色设置器</h1><hr/><br/> 背景颜色 <input type="text" name="" id="b1" /> 文本颜色 <input type="text" name="" id="b2" /> </body> <script> function dragMap(opts){//定义一个拖动类,以实时捕捉映射坐标值 this.map=document.getElementById(opts.map); this.mover=document.getElementById(opts.mover); this.x=1; this.y=0; this.drag(opts.dir.indexOf('x')+1,opts.dir.indexOf('y')+1); }; dragMap.prototype={ getPos:function (el){//取得标签页面坐标 var x=0,y=0; while(el){x+=el.offsetLeft; y+=el.offsetTop;el=el.offsetParent}; return {x:x,y:y} }, getMapPos:function (x,y){//取得子标签相对拖动容器的坐标 var mp=this.getPos(this.map); x=Math.max(0,x-mp.x-7); y=Math.max(0,y-mp.y-7); return {x:x,y:y} },//保证安全取值范围 cut:function (a){return Math.min(124,Math.max(-4,a))}, drag:function (_x,_y){//拖动方法 var me=this,d=document,w=window; this.map.onmousedown=function (e){ e=e||event; var x=e.clientX,y=e.clientY; var pos=me.getMapPos(x,y); if(_x)me.mover.style.left=pos.x+'px'; if(_y)me.mover.style.top=pos.y+'px'; me.x=pos.x/128; me.y=pos.y/128; me.onchange(); d.onmousemove=function (e){ e=e||event; var dx=me.cut(pos.x+e.clientX-x); var dy=me.cut(pos.y+e.clientY-y); if(_x)me.mover.style.left=dx+'px'; if(_y)me.mover.style.top=dy+'px'; me.x=(dx+4)/128; me.y=(dy+4)/128; me.onchange(); w.getSelection?w.getSelection().removeAllRanges():d.selection.empty(); }; d.onmouseup=function (){ d.onmousemove=null} } }, onchange:function (){} }; colorSelector={//单例拾色器对象 build:function (){//建造HTML this.win=document.createElement("DIV"); this.win.id="pscolor_win"; this.win.innerHTML='<div id="psc_preview"><div id="psc_new"></div></div><input type="text" id="psc_value" value="#FF0000" readonly /><a href="javascript:void 0" title="点击添加" id="color_out"></a><div id="psc_range"><div id="w_mask"></div><div id="b_mask" ></div><span id="psc_cursor"></span></div><div id="psc_slider"><span id="psc_mark"></span><div></div></div><div class="clear"></div>'; document.body.appendChild(this.win) }, hsb2hex: function(H,S,B){//HSB转HEX if (B==0) {return '#000000'}; H%=360,S/=100,B/=100,H/=60; var i = Math.floor(H),f = H-i,p = B*(1-S),q = B*(1-(S*f)),t = B*(1-(S*(1-f))); var g = [[B,t,p],[q,B,p],[p,B,t],[p,q,B],[t,p,B],[B,p,q]][i]; for (i=g.length;i--;)g[i]=('0'+Math.round(g[i]*255).toString(16)).slice(-2); return '#'+g.join('').toUpperCase() }, show:function (x,y){//定位显示面板 var V=this.win.style; V.left=x+'px'; V.top=y+'px'; V.display='block'; }, hide:function (){this.win.style.display='none';return this}, bind:function (el){//绑定输入框 el=document.getElementById(el); var me=this,h=el.offsetHeight+1; el.onfocus=function (e){ var pos=me.pos(this); me.binder=this; me.show(pos.x,pos.y+h); }; el.onclick=function (e){me.stop(e||window.event)}; this.addEvent(document,'click',function(){me.hide()}); return this }, addEvent:function (el,type,fn){//多次添加事件 el.attachEvent?el.attachEvent('on'+type,function(){fn.call(el)}): el.addEventListener(type, fn, false); }, stop: function(_e) {//取消冒泡 _e.stopPropagation?_e.stopPropagation():(_e.cancelBubble = true) }, init:function (){ var d=document,me=this; this.build(); this.old="#000000"; try{d.execCommand("BackgroundImageCache", false, true)}catch(e){};//IE6-bug this.area=new dragMap({map:"psc_range",mover:"psc_cursor",dir:'xy'}); this.slider=new dragMap({map:"psc_slider",mover:"psc_mark",dir:'y'}); this.win=d.getElementById("pscolor_win"); this.view=d.getElementById("psc_range"); this.box=d.getElementById("psc_preview"); this.newColor=d.getElementById("psc_new"); this.input=d.getElementById("psc_value"); this.out=d.getElementById("color_out"); this.pos=this.area.getPos;//引用拖动对象的取页面坐标方法共用 this.area.onchange=this.slider.onchange=function (){//两个拖动对象的事件定制 var h=Math.round((1-me.slider.y)*360),s=100,b=100; me.view.style.background=me.hsb2hex(h,s,b);//设置左侧背景色 s=me.area.x*100; b=100-me.area.y*100; me.input.value=me.newColor.style.background=me.old=me.hsb2hex(h,s,b);//设置上面文本框的值和预览框的背景 }; this.win.onclick=function (e){me.stop(e||window.event)};//取消面板冒泡 this.win.ondblclick=this.out.onclick=function (){ me.box.style.background=me.old; me.hide().onclick(me.input.value); };//输出按钮事件转发 return this; }, onclick:function (x){//添加选定色彩事件,可以自已添加其它响应. this.binder.value=x; this.binder.style.background=x; document.body.style[this.binder.id=='b1'?'background':'color']=x; } }; colorSelector.init().bind('b1').bind('b2'); </script> </html>
发表评论
-
Jquery固定Div在页面顶部
2010-01-19 20:54 5966html: <div id="uberbar ... -
Jquery Flexigrid jsp Demo
2009-11-30 21:49 5704这是很久之前 我写给 Flexigrid作者Paulo 的 一 ... -
熟悉 js window 对象属性和方法
2009-11-07 16:56 1780熟练window对象的open、clo ... -
一个不错的js的RIA 框架组件
2009-10-11 21:01 947一个不错的js的RIA 框架组件:http://qooxdoo ... -
文本框限制输入整数和小数
2009-09-17 22:34 1217function filterInt(evt){ evt ... -
jquery 键盘事件
2009-09-06 13:19 3411$(document).keypress(function(e ... -
JavaScript仿QQ窗口抖动算法
2009-07-12 13:47 1626JavaScript仿QQ窗口抖动算法: <img ... -
IE8使用<meta ... IE=EmulateIE7 /> 进行渲染
2009-06-27 21:24 2433目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出 ... -
javascript提取< >中的Email地址,比如:aa<aa@163.com>;bb..
2009-06-22 10:56 3424下面是我曾经在51js上提出的问题,“客服果果”给我的解答: ... -
跨无限级iframe框架计算位置position[x, y]
2009-06-14 13:34 2765代码摘自“泽元软件-ZCMS”,作为自己学习之用: (转载请 ... -
非常不错的 Jquery Tools UI libray
2009-06-13 23:40 1367非常不错的 Jquery Tools UI libray: ... -
javascript的format格式化时间函数,类似于java的SimpleDataFormat
2009-05-30 15:37 2670Date.prototype.format = functio ... -
比较文档位置 contains() 和 compareDocumentPosition() 方法
2009-05-30 15:35 1259文章中解释了 contains() 和 compareDocu ... -
解决window.onresize事件多次调用问题
2009-05-30 15:33 5804解决window.onresize事件多次调用问题: < ... -
ie6 png透明国外处理方法,支持background-position
2009-05-30 14:46 6178网址:http://dillerdesign.com/expe ... -
window.open页面中无提示关闭父窗口
2009-05-28 22:14 1979在window.open 打开的页面中加入: <sc ... -
JavaScript 内存回收散记
2009-05-18 22:28 1363xxx.innerHTML = ''; 很重要,目前来看是最 ... -
cookie 跨域访问
2009-04-16 16:09 8027正常的cookie只能在一个应用中共享,即一个cookie只能 ... -
清除浮动的最简写法
2009-04-11 21:18 1551元素浮动导致的问题及解决办法大家都应该很熟悉了,举个简单的例子 ... -
另类拖动效果
2009-03-25 10:53 916<html> <head> <t ...
相关推荐
仿Photoshop取色功能的JavaScript拾色器——ColorPicker编写实战源代码,模仿PhotoShop的设色器的功能,将其迁移到WEB应用中,当然了,本拾色器并不是一个完美的拾色器,因为只是模拟了HSV模式,而且只提供一个...
JavaScript仿Photoshop的取色功能,一款非常棒的网页JS拾色器——ColorPicker编写实战源代码,模仿PhotoShop的设色器的功能,将其迁移到WEB应用中,当然了,本拾色器并不是一个完美的拾色器,因为只是模拟了HSV模式...
Adobe 拾色器中的色域可显示 HSB 颜色模式、RGB 颜色模式和 (Photoshop) Lab 颜色模式中的颜色分量。 博主收藏的好用的三款拾色器小软件,推荐大家使用,特别是在PS或者前端开发中可以快速得到自己想用的颜色RGB格式...
引发Photoshop色彩修正划时代之变革 关于Photoshop Lab模式的重量级专著 Lab模式是Photoshop中重要的三大色彩模式之一。RGB模式是基于光学原理的,而CMYK模式是颜料反射光线的色彩模式,Lab模式不依赖于光线,...
在 Adobe 拾色器中,您可以基于 HSB(色相、饱和度、亮度)、RGB(红色、绿色、蓝色)颜色模型选择颜色,或者根据颜色...Adobe 拾色器中的色域可显示 HSB 颜色模式、RGB 颜色模式和 (Photoshop) Lab 颜色模式中的颜色分量。
photoshop有个取色的功能,这个工具就是专门取色的。相信有很多开发人员会用得到
PHOTOSHOP.LAB修色圣典[中文全彩][六分卷][过路人odv1]. 定价:128元 国内第一本Lab模式方面的图书 数码印前技术之父殚精竭智之杰作 引发Photoshop色彩修正划时代之变革 关于Photoshop Lab模式的重量级...
AS3版本拾色器RGB值与HSB值互相转换 photoShop 拾色器
Photoshop Lab 修色盛典 (中文版的) 第五章 锐化L 模糊AB
Photoshop7.0.1落雪梨花全功能绿色精简版
中文辅助小软件 可定义自动保存或保存提醒 可自定义HUD拾色器 前景拾色器 等快捷键
photoshop修色圣典(第五版)素材Chapter_01-04
摘要:VB源码,图形处理,ColorPicker,拾色器 ColorPicker源码,VB山寨的Photoshop专业拾色器,也叫颜色选择器,仿牛叉的Photoshop软件,看上去挺专业 ,赞一个哦,对作者表示崇高敬意!
引发Photoshop色彩修正划时代之变革 关于Photoshop Lab模式的重量级专著 Lab模式是Photoshop中重要的三大色彩模式之一。RGB模式是基于光学原理的,而CMYK模式是颜料反射光线的色彩模式,Lab模式不依赖于光线,...
引发Photoshop色彩修正划时代之变革 关于Photoshop Lab模式的重量级专著 Lab模式是Photoshop中重要的三大色彩模式之一。RGB模式是基于光学原理的,而CMYK模式是颜料反射光线的色彩模式,Lab模式不依赖于光线,...
详细讲解photoshop,修色等使用的技巧,方便大家更好的学习,使用
photoshop.cs2.9.0.中文绿色完整增强版
引发Photoshop色彩修正划时代之变革 关于Photoshop Lab模式的重量级专著 Lab模式是Photoshop中重要的三大色彩模式之一。RGB模式是基于光学原理的,而CMYK模式是颜料反射光线的色彩模式,Lab模式不依赖于光线,...