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算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
javascript常用函数(1)
Nov 04 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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 session应用实例 登录验证
2009/03/16 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
几种响应式文字详解
2017/05/19 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python 多个参数不为空校验方法
2019/02/14 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
大学专科生推荐信范文
2013/11/23 职场文书
四年级科学教学反思
2014/02/10 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
项目合作意向书模板
2014/07/29 职场文书
交通工程专业推荐信
2014/09/06 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
python Tkinter的简单入门教程
2021/04/11 Python