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


Posted in Javascript onDecember 21, 2016

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

Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
Node.js模块加载详解
Aug 16 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
js编写三级联动简单案例
Dec 21 #Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 #Javascript
js返回顶部实例分享
Dec 21 #Javascript
JS实现的系统调色板完整实例
Dec 21 #Javascript
基于jPlayer三分屏的制作方法
Dec 21 #Javascript
js实现的简练高效拖拽功能示例
Dec 21 #Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
You might like
PHP $_FILES函数详解
2011/03/09 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python处理document文档保留原样式
2019/09/23 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
PHP经典面试题
2016/09/03 面试题
灵泰克Java笔试题
2016/01/09 面试题
关于运动会的稿件
2014/02/02 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
住房抵押登记委托书
2014/09/27 职场文书
校长师德表现自我评价
2015/03/04 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
浅析Python中的随机采样和概率分布
2021/12/06 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers