一个简单的在线调色板
找了一整天的调色板，都没有比较符合俺要求的。。。很郁闷，用别人的色彩算法自己搞了一个。。。恩，也可以去 http://www.x-bs.com 查看效果
源码如下：
<script>
var Panel_Name = 'C_pointer';
function getColor(prtX,prtY){
var colorR = 0;
var colorG = 0;
var colorB = 0;
if(prtX < 32){
colorR = 256;
colorG = prtX * 8;
colorB = 1;
}
if(prtX >= 32 && prtX < 64){
colorR = 256 - (prtX - 32 ) * 8;
colorG = 256;
colorB = 1;
}
if(prtX >= 64 && prtX < 96){
colorR = 1;
colorG = 256;
colorB = (prtX - 64) * 8;
}
if(prtX >= 96 && prtX < 128){
colorR = 1;
colorG = 256 - (prtX - 96) * 8;
colorB = 256;
}
if(prtX >= 128 && prtX < 160){
colorR = (prtX - 128) * 8;
colorG = 1;
colorB = 256;
}
if(prtX >= 160){
colorR = 256;
colorG = 1;
colorB = 256 - (prtX - 160) * 8;
}
if(prtY < 64){
colorR = colorR + (256 - colorR) * (64 - prtY) / 64;
colorG = colorG + (256 - colorG) * (64 - prtY) / 64;
colorB = colorB + (256 - colorB) * (64 - prtY) / 64;
}
if(prtY > 64 && prtY <= 128){
colorR = colorR - colorR * (prtY - 64) / 64;
colorG = colorG - colorG * (prtY - 64) / 64;
colorB = colorB - colorB * (prtY - 64) / 64;
}
if(prtY > 128){
colorR = 256 - ( prtX / 192 * 256 );
colorG = 256 - ( prtX / 192 * 256 );
colorB = 256 - ( prtX / 192 * 256 );
}
colorR = parseInt(colorR);
colorG = parseInt(colorG);
colorB = parseInt(colorB);
if(colorR >= 256){
colorR = 255;
}
if(colorG >= 256){
colorG = 255;
}
if(colorB >= 256){
colorB = 255;
}
colorR = colorR.toString(16);
colorG = colorG.toString(16);
colorB = colorB.toString(16);
if(colorR.length < 2){
colorR = 0 + colorR;
}
if(colorG.length < 2){
colorG = 0 + colorG;
}
if(colorB.length < 2){
colorB = 0 + colorB;
}
return "#" + colorR + colorG + colorB;
}
function pickColor(obj,id){
var ta = document.getElementById(id);
if (document.getElementById(Panel_Name)){
var PN = document.getElementById(Panel_Name);
}else{
var PN = document.createElement('div');
var A_1 = document.createElement('div');
var A_2 = document.createElement('div');
PN.id = Panel_Name;
PN.style.position = A_1.style.position = A_2.style.position = 'absolute';
PN.style.width = '192px';
PN.style.border = A_1.style.border = A_2.style.border = '1px solid black';
PN.style.height = '154px';
PN.style.background = 'white url(../Images/ColorPanel.jpg) top no-repeat';
PN.style.left = '-1';
PN.style.top = '-1';
PN.style.zIndex = '6';
A_1.style.bottom = A_2.style.bottom = '2px';
A_1.style.width = A_2.style.width = '60px';
A_1.style.height = A_2.style.height = '20px';
A_1.style.left = '10px';
A_2.style.left = '110px';
A_1.innerHTML = A_2.style.background = obj.style.background;
A_1.style.overflow = 'hidden';
PN.appendChild(A_1);
PN.appendChild(A_2);
obj.appendChild(PN);
obj.style.zIndex = '10';
var xobj = document.getElementById(Panel_Name);
xobj.onmouseout = function(){
this.parentNode.style.zIndex = '5';
this.parentNode.removeChild(this);
}
xobj.onclick = function(e){
var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
obj.style.background = NC;
ta.value = NC;
this.parentNode.style.zIndex = '5';
this.parentNode.removeChild(this);
}
xobj.onmousemove = function(e){
var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
A_1.innerHTML = A_2.style.background = NC;
}
}
}
</script> <input type="text" οnclick="pickColor(document.getElementById('preview'),'setColor1');this.blur();" id="setColor1" />
<div οnclick="pickColor(this,'setColor1');" style="border: 1px solid black; width: 40px; height: 20px; cursor: pointer;" id="preview"> </div>
一个简单的在线调色板相关推荐
- 基于PHP实现一个简单的在线聊天功能（轮询ajax ）
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
- WordCounter.icu - 一个简单的在线实时字数统计工具
字数计数器是检测文档字数的绝佳工具.它们有多种格式,并可用于个人和专业用途. 无论是哪种类型的字数统计器,对于任何想要验证其工作品质是否简洁且无错误的人来说都是一个极为重要的工具. 您应该习惯于计算字 ...
- 详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap
最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步. 首先介绍一下相关文件信息和功能 ...
- php输出计算器,一个简单的在线计算器
1.[代码][PHP]代码 一个简单的计算器 //如果用户单击了计算按钮才存在表单变量,才能接收表单数据和对数据进行验证 //以下if语句判断是否将表单中的两个操作数提交到本页面,如果没有则不执行 i ...
- 基于PHP实现一个简单的在线聊天功能
一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻烦的是前端展..于是.. 需求分析 要实现功能,首先要做前端,经过对比其他网站的在线聊天功能,发现除了基本的聊天功能以外,还要注意 ...
- 一个简单的在线md5验证工具的实现
因为要开始找工作了,因此更新博客的时间变长了.这学期学校开了门c#.NET的课程,基于.NET技术的强大,我也决定开始自学用ASP.NET来开发网站(以前曾用ASP开发过). 今天遇到要在数据库中存储 ...
- 用python制作一个简单的在线单词翻译器
python在线单词翻译器 老早之前写的,就是把输入的内容提交到翻译网页,然后把相应的数据打印出来而已,有时候忘记一些什么单词的时候还是蛮好用的. import requests import url ...
- php在线画布,html5实现一个简单的在线画板
我们先来看看实现效果: (推荐教程:h5) 实现代码如下: var c = document.getElementById('canvas'); var ctx = c.getContext('2d' ...
最新文章
- TCP的三次握手与四次挥手（详解+动图）
- 01012_计算机常用单词
- hdu 1556 Color the ball
- 【视频】vue $watch监控数据的变化
- 10.6 ip：网络配置工具
- 一种数据结构 跳表skiplist
- 【ES6(2015)】Generator
- TensorFlow神经网络（九）VGG net论文阅读笔记
- windows获取主板序列号和盘符号_【装机帮扶站】第342期：甭管是什么主机，盘它！...
- Windows下PowerShell监控Keepalived
- python与Labview进行数据通信(UDP)
- 五大步骤快速搭建个人网站
- Linux系统下Java程序读取配置文件
- 软件测试全套教程，软件测试自学线路图
- Learning the Model Update for Siamese Trackers论文笔记
- 数学表达式: 从恐惧到单挑 (7. min 与 argmin)
- EXPLORER参数打开并高亮选定文件。
- java我们一起打雪仗_一起打雪仗的作文
- android手机变微软手机号码,微软Your Phone未来将能让你用电脑远程控制拨打Android手机电话...
- Ardunio开发实例-数字温度传感器