查资料参照着做了一个,用来理解颜色选择器,效果如图:
主要渐变色显示和颜色计算,还有点小问题,勉强能自用
<style>
.select-color {
}
.select-color .select-color-aaa {
display:inline-block;width:256px;height:256px;background-color:#ff0000;
}
.select-color .select-color-aa {
width:256px;height:256px;background-image:linear-gradient(to right,#fff,rgba(255,255,255,0));
}
.select-color .select-color-a {
width:256px;height:256px;background-image:linear-gradient(to top,#000,rgba(255,255,255,0));
}
.select-color .select-color-a-pos {
width:1px;height:1px;
border: 1px solid red;
background-color: #fff;
position: relative;
}
.select-color .select-color-b-group {
display:inline-block;width:220px;height:256px;
}
.select-color .select-color-b {
display:inline-block;width:32px;height:256px;
}
.select-color .select-color-ccc {
display:inline-block;width:128px;height:32px;
}
.select-color .select-color-cc {
display:inline-block;width:128px;min-height:40px;
border:1px solid black;
}
</style>
<div class="row">
<div class="col-md-12">
色彩选择
<div id="p2" class="select-color">
<div class="select-color-b-group">
<div id="select-color-b-ffxx00"
class="select-color-b" style="background: -webkit-linear-gradient(top,#f00 0%,#ff0 100%);">
</div>
<div id="select-color-b-xxff00"
class="select-color-b" style="background: -webkit-linear-gradient(top,#0f0 0%,#ff0 100%);">
</div>
<div id="select-color-b-00ffxx"
class="select-color-b" style="background: -webkit-linear-gradient(top,#0f0 0%,#0ff 100%);">
</div>
<div id="select-color-b-00xxff"
class="select-color-b" style="background: -webkit-linear-gradient(top,#00f 0%,#0ff 100%);">
</div>
<div id="select-color-b-xx00ff"
class="select-color-b" style="background: -webkit-linear-gradient(top,#00f 0%,#f0f 100%);">
</div>
<div id="select-color-b-ff00xx"
class="select-color-b" style="background: -webkit-linear-gradient(top,#f00 0%,#f0f 100%);">
</div>
<div class="select-color-b" style="display:none;background: -webkit-linear-gradient(top,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);">
</div>
</div>
<div class="select-color-aaa" id="select-color-aaa" style="background-color:#ff0000">
<div class="select-color-aa" id="select-color-aa">
<div class="select-color-a" id="select-color-a">
<div class="select-color-a-pos" id="select-color-a-pos">
</div>
</div>
</div>
</div>
<div class="select-color-ccc">
<div class="select-color-cc">
说明:先选一个基色,再选亮度
</div>
<div class="select-color-cc">
<span id="select-color-result">颜色</span>
</div>
<div class="select-color-cc" id="select-color-show">
</div>
</div>
</div>
</div>
</div>
<script>
// 颜色选择
var select_color_mark = {};
function select_color_init() {
// 右边色条绑定点击和拖动事件
select_color_b_bind('ffxx00');
select_color_b_bind('xxff00');
select_color_b_bind('00ffxx');
select_color_b_bind('00xxff');
select_color_b_bind('xx00ff');
select_color_b_bind('ff00xx');
// 左边绑定事件
select_color_a_bind();
}
function select_color_a_bind() {
var e;
e = document.getElementById('select-color-a');
e.onclick = function(event) {select_color_a_clk(event);}
e.onmousedown = function(event) {select_color_a_mdown(event);}
e.onmouseup = function(event) {select_color_a_mup(event);}
e.onmousemove = function(event) {select_color_a_mmove(event);}
}
function select_color_a_mdown(event) {
select_color_mark['ffffff'] = true;
}
function select_color_a_mup(event) {
select_color_mark['ffffff'] = false;
}
function select_color_a_mmove(event) {
if (select_color_mark['ffffff']) {
select_color_a_clk(event);
}
}
function select_color_a_clk(event) {
if (!event)
return;
// x y坐标获取
var x = event.offsetX;
var y = event.offsetY;
if (x < 0 || y < 0)
return;
console.log(x + ", " + y);
var pos = document.getElementById('select-color-a-pos');
pos.style.top = y + "px";
pos.style.left = x + "px";
// 底色获取
var c = document.getElementById('select-color-aaa').style.backgroundColor;
//console.log(c); // rgb(255, 0, 0)
c = c.substring(4, c.length - 1);
var arr = c.split(/\s*,\s*/g);
var r = parseInt(arr[0]);
var g = parseInt(arr[1]);
var b = parseInt(arr[2]);
console.log(r + "," + g + "," + b);
// 计算结果:
// 白--彩
// 黑--黑
// 先算白到彩之间的颜色与x的关系,再算得到的颜色到黑色与y的关系
r = 256 - x + x * r / 256; // 化简 (256 - x) * ((256 - r) / 256) + r;
g = 256 - x + x * g / 256;
b = 256 - x + x * b / 256;
//console.log(r + "," + g + "," + b);
r = r - r * y / 256; // 化简 r / 256 * (256 - y);
g = g - g * y / 256;
b = b - b * y / 256;
//console.log(r + "," + g + "," + b);
Math.floor(5/2)
r = Math.floor(r)
g = Math.floor(g)
b = Math.floor(b)
//console.log(r + "," + g + "," + b);
var ret1 = "rgb(" + r + "," + g + "," + b + ")";
var ret2 = "#";
ret2 += r < 10 ? ("0" + r) : (r.toString(16));
ret2 += g < 10 ? ("0" + g) : (g.toString(16));
ret2 += b < 10 ? ("0" + b) : (b.toString(16));
document.getElementById('select-color-show').style.backgroundColor = ret2;
document.getElementById('select-color-result').innerHTML = ret1 + "<br>" + ret2;
}
function select_color_b_bind(type) {
var e;
e = document.getElementById('select-color-b-' + type);
e.onclick = function(event) {select_color_b_clk(event, type);}
e.onmousedown = function(event) {select_color_b_mdown(event, type);}
e.onmouseup = function(event) {select_color_b_mup(event, type);}
e.onmousemove = function(event) {select_color_b_mmove(event, type);}
}
function select_color_b_mdown(event, type) {
select_color_mark[type] = true;
}
function select_color_b_mup(event, type) {
select_color_mark[type] = false;
}
function select_color_b_mmove(event, type) {
if (select_color_mark[type])
select_color_b_clk(event, type);
}
function select_color_b_clk(event, type) {
var x = event.offsetX;
var y = event.offsetY;
//console.log(x + ", " + y);
var z = y.toString(16);
if (y < 10)
z = '0' + z;
var c = type.replace('xx', z);
//console.log(type + ' -> ' + c);
document.getElementById('select-color-aaa').style.backgroundColor = '#' + c;
}
select_color_init();
</script>