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 相关文章推荐
table insertRow、deleteRow定义和用法总结
May 14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
JavaScript组合继承详解
Nov 07 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扩展图文教程
2008/12/12 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Move.js入门
2017/02/08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python模拟登录12306的方法
2014/12/30 Python
python fabric使用笔记
2015/05/09 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python自定义一个异常类的方法
2019/06/27 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
如何用Django处理gzip数据流
2021/01/29 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
应聘美工求职信
2013/11/07 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
大学生自荐材料范文
2014/12/30 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python