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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
让您的菜单不离网站
2006/10/03 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python的id()函数介绍
2013/02/10 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python中turtle库的简单使用教程
2020/11/11 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
编写strcpy函数
2014/06/24 面试题
客户代表自我评价范例
2013/09/24 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
法定代表人授权委托书
2014/04/04 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
解除劳动合同证明书
2014/09/26 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Python自然语言处理之切分算法详解
2021/04/25 Python
python自然语言处理之字典树知识总结
2021/04/25 Python