仿PS的JS调色板Demo

最新推荐文章于 2024-05-14 09:51:45 发布

rembo

最新推荐文章于 2024-05-14 09:51:45 发布

阅读量310

点赞数

分类专栏： HTML 文章标签： html UI JavaScript ViewUI

本文链接：https://blog.csdn.net/rembo/article/details/84508879

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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 οnclick="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变的部分，由于所有颜色展现对浏览器负载比较大，所以不推荐使用类似的调色板。

截图：

rembo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿PS的JS调色板Demo

&lt;html&gt;&lt;head&gt;&lt;style&gt;#colorpad table{ border-collapse:collapse; cellpadding:0; cellspacing:0; width:255px; height:255px; border:0;}#colorpadright table{...
复制链接

扫一扫

专栏目录