使用css3和javascript開(kāi)發(fā)web拾色器實(shí)例代碼

發(fā)布時(shí)間：2021-03-16 10:36:34 作者：佚名

這篇文章主要介紹了使用css3和javascript開(kāi)發(fā)web拾色器實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

本實(shí)例中的web拾色器功能使用css3實(shí)現(xiàn)頁(yè)面效果，即在頁(yè)面上顯示的元素用css3樣式來(lái)實(shí)現(xiàn)的。再使用js生成拾色器顏色數(shù)據(jù)，并控制各元素的鼠標(biāo)事件。當(dāng)事件作為反應(yīng)時(shí)，獲取到對(duì)應(yīng)的數(shù)據(jù)并顯示顏色值。

拾色器的html元素分為三個(gè)部分，分別是拾色區(qū)域、色系區(qū)域和顏色顯示區(qū)域，如圖所示：

web拾色器三個(gè)部分的html元素如下：

<div class="color_container">
  <div class="main_wrap"> <!--拾色區(qū)域-->
    <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"> <!--色系區(qū)域-->
    <div class="side_drag" id="sideDrag"></div>
    <div class="side_con" id="sideCon"></div>
  </div>
  <div class="show_color" id="findColor"><!--顯示區(qū)域-->
    <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樣式實(shí)現(xiàn)圖片上的布局效果：

.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;}

接下來(lái)使用css3的 linear-gradient 線性漸變來(lái)修改色系區(qū)域元素的背景顏色。色系規(guī)則是紅>黃>綠>青>藍(lán)>紫>紅，共經(jīng)過(guò)了6次變化，每次變化比例是16%-17%之間，所以可以從上至下添加這七個(gè)漸變顏色，增加的css代碼如下：

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

此時(shí)效果如圖所示：

拾色區(qū)域一般默認(rèn)顏色是紅色系，所以先給拾色區(qū)域添加紅色背景，代碼如下：

.color_container .main_con{background:red;}

此時(shí)效果如圖所示：

一般拾色器的拾色區(qū)域顯示規(guī)則是，從上至下由明到暗；從左至右由淺到深。這種效果可以添加兩個(gè) linear-gradient 透明漸變實(shí)現(xiàn)，代碼如下：

.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%);}

此時(shí)已經(jīng)實(shí)現(xiàn)最終靜態(tài)效果如圖所示：

此時(shí)web拾色器頁(yè)面效果是有了，但還缺少交互，不能改變拾色區(qū)域背景及選擇顏色，接下來(lái)通過(guò)js來(lái)實(shí)現(xiàn)交互效果。

因?yàn)槭髽?biāo)在拖動(dòng)吸管選擇顏色是每個(gè)像素移動(dòng)的，所以需要根據(jù)色系區(qū)域高度來(lái)計(jì)算顏色值并存儲(chǔ)備用，代碼如下所示：

//色系存儲(chǔ)數(shù)據(jù)
var aColorSeries = {
  r:[255],g:[0],b:[0]
}
//色系數(shù)據(jù)變化
var aColorVary = ['g','r','b','g','r','b'];
//色系元素
var eSeries = document.getElementById('sideCon');
//每個(gè)色系顏色變化次數(shù)
var nSeriesLen = Math.floor(eSeries.offsetHeight / 6);
//每次變化步長(zhǎng)值
var nStep = Math.floor(255 / nSeriesLen);
//步長(zhǎng)值剩余值
var nStepRemainder = 255 / nSeriesLen - nStep;
//循環(huán)存儲(chǔ)色系rgb顏色值
for(let i=0;i<aColorVary.length;i++){
  let add = (i % 2);  //因?yàn)楦叨炔荒苷?，需要使最終色系填滿元素
  let nFull = 0; //計(jì)算剩余的步長(zhǎng)值
  for(let j=0;j<nSeriesLen+add;j++){
    nFull += nStepRemainder;
    let nAddStep = nStep;
    if(nFull>1){  //剩余步長(zhǎng)值超過(guò)1時(shí)，每次增加步長(zhǎng)值加1
      nAddStep = nStep + 1;
      nFull = nFull - 1;
    }
    //遍歷色系數(shù)據(jù)對(duì)象添加顏色值
    for(let k in aColorSeries){
      let nVal = 0;
      let nOldVal = aColorSeries[k][aColorSeries[k].length-1];
      if(k==aColorVary[i]){
        if(add==0){ //判斷顏色值改變方向是變大還是變小
          nVal = nOldVal + nAddStep;
        }else{
          nVal = nOldVal - nAddStep;
        }
        if(nVal > 255){  //限制最大值255
          nVal = 255;
        }else if(nVal < 0){  //限制最小值為0
          nVal = 0;
        }
      }else{
        nVal = nOldVal;
      }
      aColorSeries[k].push(nVal);
    }
  }
}

在色系區(qū)域吸管上加上拖拽功能，代碼如下所示：


復(fù)制代碼
代碼如下:
//獲取拾色區(qū)域var eMainCon = document.getElementById('mainCon');//獲取色系吸管var eSideDrag = document.getElementById('sideDrag');//獲取吸管高度var nSideDragH = eSideDrag.offsetHeight;//獲取吸管限制高度var nSideH = eSeries.offsetHeight - nSideDragH / 2; //在色系吸管上綁定鼠標(biāo)按下事件eSideDrag.addEventListener('mousedown',function(event){ //初始化鼠標(biāo)開(kāi)始拖拽的點(diǎn)擊位置 var nInitY = event.clientY; //初始化色系吸管位置 var nInitTop = this.offsetTop; //色系吸管位置 var nY = null; //色系選擇顏色 var color = null; document.onmousemove = event=>{ //鼠標(biāo)移動(dòng)時(shí)取消默認(rèn)行為，避免選中其他元素或文字 event.preventDefault(); //根據(jù)鼠標(biāo)設(shè)置色系吸管位置 nY = event.clientY - nInitY + nInitTop; //下面的條件限制色系吸管不能超出范圍 if(nY >= nSideH-1){ nY = nSideH-1; } if(nY <= -nSideDragH/2){ nY = -nSideDragH/2; } //因?yàn)橛玫氖羌^函數(shù)，所以this還是指向滑塊，修改滑塊位置 this.style.top = nY + 'px'; //修改拾色區(qū)背景顏色 let n = nY + nSideDragH / 2; color = {r:aColorSeries.r[n],g:aColorSeries.g[n],b:aColorSeries.b[n]}; eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`; } //鼠標(biāo)釋放事件 document.onmouseup = event=>{ document.onmouseup = null; document.onmousemove = null; }});

此時(shí)色系區(qū)域的吸管拖動(dòng)時(shí)，拾色區(qū)域的背景顏色就會(huì)跟著變化，效果如圖所示：

在色系區(qū)域再加上點(diǎn)擊事件，點(diǎn)擊時(shí)可以把吸管滑動(dòng)到點(diǎn)擊的位置，并修改拾色區(qū)域顏色，代碼如下所示：

//色系元素綁定點(diǎn)擊事件
eSeries.addEventListener('click',function(event){
  //獲取點(diǎn)擊位置
  let nY = event.offsetY - nSideDragH/2;
  //增加過(guò)渡樣式，使吸管有滑動(dòng)效果
  eSideDrag.style.transition = '.1s';
  //刪除過(guò)渡樣式
  setTimeout(e=>{
    eSideDrag.style.transition = 'inherit';
  },100)
  //改變色系吸管位置 
  eSideDrag.style.top = nY + 'px';
  
  //修改拾色區(qū)背景顏色
  let n = nY + nSideDragH / 2;
  color = {r:aColorSeries.r[n],g:aColorSeries.g[n],b:aColorSeries.b[n]};
  eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`;
});

同樣的，拾色區(qū)域也需要把顏色存儲(chǔ)起來(lái)。因?yàn)槊看芜x擇色系時(shí)，拾色區(qū)域顏色都會(huì)修改，所以用一個(gè)函數(shù)實(shí)現(xiàn)此功能，代碼如下所示：

//拾色區(qū)域顏色
var aColorMainStore = [];
//獲取拾色區(qū)域的寬度和高度
var nMainW = eMainCon.offsetWidth;
var nMainH = eMainCon.offsetHeight;

function fnColorSet(color){
  //重置拾色區(qū)域顏色數(shù)據(jù)
  aColorMainStore  = [];

  //左側(cè)可變顏色，默認(rèn)為白色
  var oLeftColor = {r:255,g:255,b:255};
  //右側(cè)可變顏色，因?yàn)閏olor參數(shù)是字符串,所以要轉(zhuǎn)換為數(shù)組
  var oRightColor = JSON.parse(JSON.stringify(color));
  //底部顏色固定黑色
  var oBottomColor = {r:0,g:0,b:0};
  //因?yàn)樯珘K可變顏色從左上角開(kāi)始，所以默認(rèn)設(shè)置為白色
  var oMainColor = {r:255,g:255,b:255};
  //Y軸步長(zhǎng)值
  var oYStep = {
    lStep: Math.floor(256 / nMainH),  //左側(cè)從上至下是從白色漸變到黑色，所以固定步長(zhǎng)值計(jì)算
    lRemainder: 256 / nMainH - Math.floor(256 / nMainH),  //左側(cè)步長(zhǎng)剩余值
    lAdd:0, //漸變過(guò)程添加值
  }
  //枚舉添加右側(cè)從下至下漸變步長(zhǎng)值、剩余值及添加值
  for(let k in oRightColor){
    oYStep[k+'Step'] = Math.floor((oRightColor[k]-oBottomColor[k]+1) / nMainH);
    oYStep[k+'Remainder'] = (oRightColor[k]-oBottomColor[k]+1) / nMainH - Math.floor((oRightColor[k]-oBottomColor[k]+1) / nMainH);
    oYStep[k+'Add'] = 0;
  }

  //循環(huán)每一行色塊
  for(let i=0;i<nMainH;i++){
    //因?yàn)槊恳涣械念伾际峭录由顫u變，所以除第一行之外每行循環(huán)都需要修改左側(cè)和右側(cè)顏色
    if(i>0){
      oYStep.lAdd += oYStep.lRemainder;
      for(let k in oLeftColor){
        //修改左側(cè)顏色
        if(oYStep.lAdd>1){
          oLeftColor[k] = oLeftColor[k] - (oYStep.lStep + 1);
        }else{
          oLeftColor[k] = oLeftColor[k] - oYStep.lStep;
        }
        //修改右側(cè)顏色
        oYStep[k+'Add'] += oYStep[k+'Remainder'];
        if(oYStep[k+'Add']>1){
          oRightColor[k] = oRightColor[k] - (oYStep[k+'Step'] + 1);
          //修改添加值
          oYStep[k+'Add'] = oYStep[k+'Add'] - 1;
        }else{
          oRightColor[k] = oRightColor[k] - oYStep[k+'Step'];
        }
      }
      //修改添加值
      if(oYStep.lAdd>1){
        oYStep.lAdd = oYStep.lAdd - 1;
      }
    }
    
    //每一行的色塊顏色單獨(dú)存到一個(gè)新的數(shù)組中
    aColorMainStore.push([]);
    //每一次循環(huán)色塊都要重置為左側(cè)顏色
    oMainColor = JSON.parse(JSON.stringify(oLeftColor));

    //x軸步長(zhǎng)值
    let oXStep = {}
    for(let k in oLeftColor){
      oXStep[k+'Step'] = Math.floor((oLeftColor[k]-oRightColor[k]) / nMainW);
      oXStep[k+'Remainder'] = (oLeftColor[k]-oRightColor[k]) / nMainW - Math.floor((oLeftColor[k]-oRightColor[k]) / nMainW);
      oXStep[k+'Add'] = 0;
    }
    
    //在每一行中循環(huán)每一列色塊
    for(let j=0;j<nMainW;j++){
      if(j!=0&&j!=nMainW-1){ //第一個(gè)色塊顏色和最后一個(gè)顏色不需要修改
        //從左至右漸變顏色
        for(let k in oMainColor){
          //逐步修改顏色
          oXStep[k+'Add'] += oXStep[k+'Remainder'];
          if(oXStep[k+'Add']>1){
            oMainColor[k] = oMainColor[k] - (oXStep[k+'Step'] + 1);
            oXStep[k+'Add'] = oXStep[k+'Add'] - 1;
          }else{
            oMainColor[k] = oMainColor[k] - oXStep[k+'Step'];
          }
        }
      }
      if(j==nMainW-1){
        //最后的顏色設(shè)置為右側(cè)顏色值
        oMainColor = JSON.parse(JSON.stringify(oRightColor));
      }
      
      //存儲(chǔ)色塊顏色
      aColorMainStore[i].push(JSON.stringify(oMainColor));
    }
  }
}

//默認(rèn)顏色為紅色背景
fnColorSet({r:255,g:0,b:0});

再給拾色區(qū)域的吸管加上拖拽功能，拾色區(qū)域加上點(diǎn)擊事件，并修改顯示區(qū)域的顏色及 rgb 的值，代碼如下所示：

//獲取顯示顏色塊
var eColorFull = document.getElementById('colorFull');
var eColorText = document.getElementById('colorText');
var aColorInput = eColorText.getElementsByTagName('input');
function fnColorFull(color){
  //顏色參數(shù)是字符串，需要轉(zhuǎn)換為數(shù)組
  var color = JSON.parse(color);
  // 修改顯示顏色
  eColorFull.style.background = 'rgb('+color.join(',')+')';
  //修改RGB顏色值
  for(let i=0;i<aColorInput.length;i++){
    aColorInput[i].value = color[i];
  }
}
//默認(rèn)顯示白色
fnColorFull('[255,255,255]');

//獲取吸管元素
var eMainDrag = document.getElementById('mainDrag');
//aMainColorStore數(shù)組中顏色行下標(biāo)
var nSX = 0;
//aMainColorStore數(shù)組中顏色列下標(biāo)
var nSY = 0;
//獲取吸管高度
var nMainDragH = eMainDrag.offsetHeight;
//獲取吸管限制寬度
var nMainLimitW = nMainW - nMainDragH / 2;
//獲取吸管限制高度
var nMainLimitH = nMainH - nMainDragH / 2;
eMainDrag.addEventListener('mousedown',function(event){
  //初始化鼠標(biāo)開(kāi)始拖拽的點(diǎn)擊位置
  var nInitX = event.clientX;
  var nInitY = event.clientY;
  //初始化吸管位置
  var nInitTop = this.offsetTop;
  var nInitLeft = this.offsetLeft;
  //選中吸管后，在document上綁定鼠標(biāo)移動(dòng)事件
  document.onmousemove = event=>{
    //鼠標(biāo)移動(dòng)時(shí)取消默認(rèn)行為，避免選中其他元素或文字
    event.preventDefault();
    //獲取鼠標(biāo)位置
    let nX = event.clientX - nInitX + nInitLeft;
    let nY = event.clientY - nInitY + nInitTop;
    //以下的條件用于限制吸管不能移出拾色區(qū)域
    if(nY >= nMainLimitH-1){
      nY = nMainLimitH-1;
    }
    if(nY <= -nMainDragH/2){
      nY = -nMainDragH/2;
    }
    if(nX <= -nMainDragH/2){
      nX = -nMainDragH/2;
    }
    if(nX>=nMainLimitW-1){
      nX = nMainLimitW-1;
    }
    //因?yàn)橛玫氖羌^函數(shù)，所以this還是指向吸管，修改吸管位置
    this.style.top = nY + 'px';
    this.style.left = nX + 'px';
    //顏色賦值,因?yàn)闆](méi)辦法選到最后一個(gè)顏色，所以加這個(gè)公式，這樣中間有些顏色選不到
    nSX = nX + nMainDragH/2;
    nSY = nY + nMainDragH/2;
    //獲取當(dāng)前位置顏色
    let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //填充顯示顏色區(qū)域
    fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
  //松開(kāi)鼠標(biāo)后釋放document上的事件
  document.onmouseup = event=>{
    document.onmouseup = null;
    document.onmousemove = null;
  } 
});
//拾色區(qū)域綁定點(diǎn)擊事件
eMainCon.addEventListener('click',function(event){
  //獲取點(diǎn)擊位置
  let nX = event.offsetX - nMainDragH/2
  let nY = event.offsetY - nMainDragH/2;
  //增加過(guò)渡樣式，使吸管有滑動(dòng)效果
  eMainDrag.style.transition = '.1s';
  //刪除過(guò)渡樣式
  setTimeout(e=>{
    eMainDrag.style.transition = 'inherit';
  },100)
  //改變拾色吸管位置 
  eMainDrag.style.top = nY + 'px';
  eMainDrag.style.left = nX + 'px';
  //顏色賦值,因?yàn)闆](méi)辦法選到最后一個(gè)顏色，所以加這個(gè)公式，這樣中間有些顏色選不到
  nSX = nX + nMainDragH/2;
  nSY = nY + nMainDragH/2;
  //獲取當(dāng)前位置顏色
  let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
  //填充顯示顏色區(qū)域
  fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));    
});

此時(shí)已經(jīng)可以拖動(dòng)拾色區(qū)域吸管并選擇顏色。但此時(shí)還沒(méi)有完全開(kāi)發(fā)完成，因?yàn)橹霸谛薷纳档氖录?，只是修改了拾色區(qū)域的背景，并沒(méi)有存儲(chǔ)拾色區(qū)域的顏色，所以需要在色系元素的事件中添加如下代碼：

//在色系吸管上綁定鼠標(biāo)按下事件
eSideDrag.addEventListener('mousedown',function(event){
  /*...*/
  
  //鼠標(biāo)釋放事件
  document.onmouseup = event=>{
    document.onmouseup = null;
    document.onmousemove = null;
    //設(shè)置拾色區(qū)顏色
    color&&fnColorSet(color);
    //獲取當(dāng)前位置顏色
    let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //填充顯示顏色區(qū)域
    fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
});
//色系元素綁定點(diǎn)擊事件
eSeries.addEventListener('click',function(event){
  //*...*/

  //刪除過(guò)渡樣式
  setTimeout(e=>{
    eSideDrag.style.transition = 'inherit';
    //設(shè)置拾色區(qū)顏色
    color&&fnColorSet(color);
    //獲取當(dāng)前位置顏色
    let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //填充顯示顏色區(qū)域
    fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  },100)
  
  /*...*/
});

一個(gè)流暢的web拾色器就完成了，我在代碼中都盡可能加上了詳細(xì)的注釋，可以幫助更清晰的理解功能實(shí)現(xiàn)邏輯。

到此這篇關(guān)于使用css3和javascript開(kāi)發(fā)web拾色器實(shí)例的文章就介紹到這了,更多相關(guān)css開(kāi)發(fā)web拾色器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！