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 相关文章推荐
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
原生JS实现pc端轮播图效果
Dec 21 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
vue-test-utils初使用详解
2019/05/23 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Python中的__slots__示例详解
2017/07/06 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
工作分析计划书
2014/04/30 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
停水通知
2015/04/16 职场文书