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 继承机制的实现(待续)
May 18 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
微信小程序实现留言板
Oct 31 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue header组件开发详解
2018/01/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
详解Python文本操作相关模块
2017/06/22 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python批量修改xml属性的实现方式
2020/03/05 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python接收手机短信的代码整理
2020/08/02 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
高中微机老师自我鉴定
2014/02/16 职场文书
婚礼主持词开场白
2014/03/13 职场文书
公司聘任书模板
2014/03/29 职场文书
React中的Context应用场景分析
2021/06/11 Javascript