仿PS的JS調色盤Demo

rembo發表於2013-12-02
原文網址 : https://blog.csdn.net/rembo/article/details/84508879
JS
<html>
<head>
<style>
#colorpad table{
   border-collapse:collapse;
	cellpadding:0;
	cellspacing:0;
	width:255px;
    height:255px;
	border:0;
}

#colorpadright table{
   border-collapse:collapse;
	cellpadding:0;
	cellspacing:0;
	width:255px;
    height:20px;
	border:0;
}
#colorpad{
    width:255px;
    height:255px;
}
#colorpadsample{
	width:100px;
	height:100px;
}

#colorpadright{
	height:20px;
	width:255px;
}
td{
   border:0;
	width:1px;
	height:1px;
	margin:0;padding:0
}
</style>
</head>
<div id="colorpad"></div>
<div id="colorpadright"></div>
<div id="colorpadsample"></div>
</html>
<script>
function setColor(style){
	document.getElementById('colorpadsample').style.background=style;
	var stylepiect1=style.split(',')[0];
	var stylepiect2=style.split(',')[2];
	var html='';var style='';
    html+='<table cellpadding=0 cellspace=0>';
	html+='<tr>';
	for(var i=0;i<256;i++){
	   style= stylepiect1+','+i+','+stylepiect2;
		html+='<td style="background:'+style+'">';
	    html+='</td>';
	}
	html+='</tr>';
	 html+='</table>';
	 document.getElementById('colorpadright').innerHTML=html;
}
var html='';
html+='<table cellpadding=0 cellspace=0>';
for(var i=0;i<256;i++){
html+='<tr>';
	for(var j=0;j<256;j++){
		html+='<td onclick="setColor(this.style.background)" style="background:rgb('+i+',0,'+j+');">';
	    html+='</td>';
	}
	 html+='</tr>';
}
html+='</table>';
document.getElementById('colorpad').innerHTML=html;
</script>

    時間倉促，用css的背景樣式，js列印255*255的調色盤，只寫了RB固定 G變的部分，由於所有顏色展現對瀏覽器負載比較大，所以不推薦使用類似的調色盤。

    截圖：

   

    

相關文章