效果图如上：
HTML和js代码如下：
<style>
*{
padding: 0;
margin:0;
list-style: none;
}
.colorPicker{
width: 255px;
width: 765px;
margin:50px auto;
}
.colorBar{
height: 30px;
width: 255px;
width: 765px;
position: relative;
}
.red{
width: 255px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background:linear-gradient(to right,rgb(255,0,0),rgb(196,129,129));
}
.black{
width: 255px;
height: 30px;
position: absolute;
top: 0;
left: 255px;
background:linear-gradient(to right,rgb(0,0,0),rgb(204,204,204));
}
.green{
width: 255px;
height: 30px;
position: absolute;
top: 0;
left: 510px;
background:linear-gradient(to right,rgb(0,255,0),rgb(181,243,181));
}
.colorSlider{
/* width: 12px; */
height: 54px;
position: absolute;
left: 50%;
margin-left: -6px;
top: -12px;
z-index: 20;
/*background-color: green;*/
}
.sliderTop{
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
border-left:6px solid transparent;
border-top:12px solid red;
border-bottom:6px solid transparent;
border-right:6px solid transparent;
}
.sliderBottom{
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
border-left:6px solid transparent;
border-top:6px solid transparent;
border-bottom:12px solid red;
border-right:6px solid transparent;
}
.colorShow{
width: 253px;
height: 100px;
margin:20px auto 0 auto;
border: 1px solid #000;
}
.showRGB{ text-align: center; display: block; }
.flag{
width: 1px;
height: 80px;
position: absolute;
left: 50%;
top: -22px;
background-color: red;
}
</style>
</head>
<body>
<div class="colorPicker">
<div class="colorBar">
<div class="red"></div>
<div class="black"></div>
<div class="green"></div>
<div class="colorSlider">
<div class="sliderTop"></div>
<div class="sliderBottom"></div>
</div>
</div>
<div class="colorShow"></div>
<div class="showRGB"></div>
</div>
<script>
function ColorPicker(parameter){
this.colorPicker = parameter.colorPicker;
this.colorShow = parameter.colorShow;
this.showRGB = parameter.showRGB;
this.colorSlider = parameter.colorSlider;
this.colorArr = parameter.colorArr;
this.cell = this.colorPicker.offsetWidth / this.colorArr.length;
}
ColorPicker.prototype = {
init:function(){
this.getRGB();
return this;
},
move:function(){
var that = this;
this.colorSlider.onmousedown = function(e){
var startX = e.pageX - this.offsetLeft;
var startY = e.pageY - this.offsetTop;
document.onmousemove = function(e){
var endX = e.pageX - startX;
var endY = e.pageY -startY;
if(endX<=0){
endX = 0
}else if(endX>=this.colorPicker.offsetWidth){
endX = this.colorPicker.offsetWidth;
}
this.colorSlider.style.left = endX +"px";
let xx = this.colorSlider.offsetLeft + 6;
this.getRGB(xx);
}.bind(that)
};
this.colorSlider.onmouseup = document.onmouseup = function(){
document.onmousemove =null;
};
},
getRGB:function(x){
var X = x||this.colorSlider.offsetLeft,
index = (X/this.cell|0)>=this.colorArr.length ? this.colorArr.length -1 : (X/this.cell|0),
s = this.colorArr[index];
var rc = s[0]-s[3],
gc = s[1]-s[4],
bc = s[2]-s[5];
var r=s[0],g=s[1],b=s[2];
rc>0 ? r-=parseInt((Math.abs(rc)/this.cell)*(X%this.cell)) : r+=parseInt((Math.abs(rc)/this.cell)*(X%this.cell));
gc>0 ? g-=parseInt((Math.abs(gc)/this.cell)*(X%this.cell)) : g+=parseInt((Math.abs(gc)/this.cell)*(X%this.cell));
bc>0 ? b-=parseInt((Math.abs(bc)/this.cell)*(X%this.cell)) : b+=parseInt((Math.abs(bc)/this.cell)*(X%this.cell));
x?this.colorShow.style.backgroundColor = `rgb(${r},${g},${b})`:this.colorShow.style.backgroundColor = `rgb(${r+6},${g+6},${b+6})`;
//this.showRGB.innerHTML=`${r}|${g}|${b}|${x%this.cell}`;
}
}
new ColorPicker({
colorPicker:document.querySelector('.colorBar'),
colorShow:document.querySelector('.colorShow'),
showRGB:document.querySelector('.showRGB'),
colorSlider:document.querySelector(".colorSlider"),
colorArr:[
[255,0,0,196,129,129],
[0,0,0,204,204,204],
[0,255,0,181,243,181]
]
}).init().move();
</script>