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父窗口控制只弹出一个子窗口
Apr 10 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
用VsCode编辑TypeScript的实现方法
May 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
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python如何省略括号方法详解
2020/03/21 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
教师个人发展总结
2015/02/11 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
redis实现排行榜功能
2021/05/24 Redis
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers