当前位置：编程学习网 >>ps教程 > Photoshop > > [js防水]js防photoshop风格拾色器代码

[js防水]js防photoshop风格拾色器代码

【www.gdgbn.com--Photoshop】

提示：您可以先修改部分代码再运行

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://filesimg.111cn.net/20091117134852121.png",sizingMethod="scale");}
#b_mask{background:url(black_mask.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://filesimg.111cn.net/20091117134858672.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><br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>简单的仿<a href="http://www.gdgbn.com/blist-159-1.html" target="_blank" class="keylink">Photoshop</a>的颜色设置器</h1>
<hr />
<br />
    背景颜色 <input id="b1" name="" type="text" />     文本颜色 <input id="b2" name="" type="text" /> <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="<input type="text" id="psc_value" value="#FF0000" readonly />";
		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){//添加选定色彩事件,可以自已添加<a href="http://www.gdgbn.com/blist-256-1.html" target="_blank" class="keylink">其它</a>响应.
		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></base>
</p>

提示：您可以先修改部分代码再运行

本文来源：http://www.gdgbn.com/ps/22437/

上一篇：【photoshop cs6教程】photoshop处理教程人物照片磨皮,美化高级教程

下一篇：如何用photoshop把照片调出来_如何用PhotoShop把照片调出淡黄质感肤色

[js防水]js防photoshop风格拾色器代码

相关推荐

网友关注

热门标签

最新Photoshop

Photoshop热门文章