js配合css3开发流畅的web拾色器功能

本实例中的web拾色器功能使用css3实现页面效果，即在页面上显示的元素用css3样式来实现的。再使用js生成拾色器颜色数据，并控制各元素的鼠标事件。当事件作为反应时，获取到对应的数据并显示颜色值。

拾色器的html元素分为三个部分，分别是拾色区域、色系区域和颜色显示区域，如图所示：

web拾色器三个部分的html元素如下：

<div class="color_container">
  <div class="main_wrap"> <!--拾色区域-->
    <div class="main_drag" id="mainDrag"></div>
    <div class="main_con" id="mainCon">
      <div class="left_white_bg bg"></div>
      <div class="bottom_black_bg bg"></div>
    </div>
  </div>
  <div class="side_wrap"> <!--色系区域-->
    <div class="side_drag" id="sideDrag"></div>
    <div class="side_con" id="sideCon"></div>
  </div>
  <div class="show_color" id="findColor"><!--显示区域-->
    <div class="color_full" id="colorFull"></div>
    <div class="color_text" id="colorText">
      R:<input type="text" readonly>
      G:<input type="text" readonly>
      B:<input type="text" readonly>
    </div>
  </div>
</div>

加上一些css样式实现图片上的布局效果：

.color_container {
   width:610px;background:#333;padding:10px;font-size:0;margin:30px auto;}
.color_container>div{
   display:inline-block;background:#fff;vertical-align:top;box-shadow:0px 0px 5px 0px #999;}
.color_container .main_con{
   width:550px;height:430px;}
.color_container .main_con .bg{
   position:absolute;top:0;right:0;bottom:0;left:0;}

.color_container .side_con{
   width:50px;height:430px;}
.color_container .main_wrap,.color_container .side_wrap{
   position:relative;}
.color_container .side_wrap{
   margin-left:10px;}
.color_container .main_drag,.color_container .side_drag{
   position:absolute;border:1px solid #fff;background:rgba(0,0,0,.3);cursor:pointer;}
.color_container .main_drag{
   width:12px;height:12px;border-radius:50%;z-index:3;left:-7px;top:-7px;}
.color_container .side_drag{
   height:6px;width:54px;border-radius:2px;left:-3px;top:-4px;}
.color_container .find_color{
   width:60px;height:60px;position:absolute;top:0;left:-70px;background:#fff;}
.color_container .show_color{
   display:block;margin:10px 0 0;height:auto;padding:10px;}
.color_container .color_full{
   display:inline-block;width:58px;height:58px;border:1px solid #ccc;}
.color_container .color_text{
   display:inline-block;margin-left:30px;height:60px;line-height:60px;text-align:center;font-size:14px;vertical-align:top;}
.color_container .color_text input{
   width:24px;margin:0 15px 0 5px;}

接下来使用css3的 linear-gradient 线性渐变来修改色系区域元素的背景颜色。色系规则是 红>黄>绿>青>蓝>紫>红，共经过了6次变化，每次变化比例是16%-17%之间，所以可以从上至下添加这七个渐变颜色，增加的css代码如下：

.color_container .side_con{
   background:linear-gradient(to bottom,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)}

此时效果如图所示：

拾色区域一般默认颜色是红色系，所以先给拾色区域添加红色背景，代码如下：

.color_container .main_con{
   background:red;}

此时效果如图所示：

一般拾色器的拾色区域显示规则是，从上至下由明到暗；从左至右由浅到深。这种效果可以添加两个 linear-gradient 透明渐变实现，代码如下：

.color_container .main_con .left_white_bg{
   background:linear-gradient(to right,#fff 0%,transparent 100%)}
.color_container .main_con .bottom_black_bg{
   background:linear-gradient(to bottom,transparent 0%,#000 100%);}

此时已经实现最终静态效果如图所示：

此时web拾色器页面效果是有了，但还缺少交互，不能改变拾色区域背景及选择颜色，接下来通过js来实现交互效果。
因为鼠标在拖动吸管选择颜色是每个像素移动的，所以需要根据色系区域高度来计算颜色值并存储备用，代码如下所示：

//色系存储数据
var aColorSeries = {
   
  r:[255],g:[0],b:[0]
}
//色系数据变化
var aColorVary = ['g','r','b','g','r','b'];
//色系元素
var eSeries = document.getElementById('sideCon');
//每个色系颜色变化次数
var nSeriesLen = Math.floor(eSeries.offsetHeight / 6);
//每次变化步长值
var nStep = Math.floor(255 / nSeriesLen);
//步长值剩余值
var nStepRemainder = 255 / nSeriesLen - nStep;
//循环存储色系rgb颜色值
for(let i=0;i<aColorVary.length;i++){
   
  let add = (i % 2);  //因为高度不能整除，需要使最终色系填满元素
  let nFull = 0; //计算剩余的步长值
  for(let j=0;j<nSeriesLen+add;j++){
   
    nFull &#