JS实现仿PS的调色板效果完整实例

本文实例讲述了JS实现仿PS的调色板效果。分享给大家供大家参考,具体如下:

运行效果图如下:

完整实例代码:

<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 stylestylepiect1=style.split(',')[0];

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

PS:这里再为大家推荐几款本站的相关在线工具:

在线RGB、HEX颜色代码生成器:

http://tools.jb51.net/color/rgb_color_generator

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:

http://tools.jb51.net/color/jPicker

在线网页调色板工具:

http://tools.jb51.net/color/color_picker

在线颜色选择器工具/RGB颜色查询对照表:

http://tools.jb51.net/color/colorpicker

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是 JS实现仿PS的调色板效果完整实例 的全部内容, 来源链接: utcz.com/z/352235.html

回到顶部