4、滑动调色板

效果展示：

红色

绿色

蓝色

 .button_container .rectangle{
        display: flex;
        height: 30px;
        line-height: 30px;
        margin: 20px 20px;
    }
  .button_container  .label{
        margin-right: 20px;
    }
  .button_container  .block{
        width:265px;
        height: 30px;
        border: #333 1px solid;
        position: relative;
    }
  .button_container  .mark{
        width: 10px;
        height: 30px;
        position: absolute;
        left: 0px;
        cursor: pointer;
        background-color: #ccc;
    }
 .button_container   .bag{
        height: 30px;
        width: 0px;
    }
 .button_container   .red  .bag{
        background-color: #f00;
    }
 .button_container   .green  .bag{
        background-color: #0f0;
    }
  .button_container  .blue  .bag{
        background-color: #00f;
    }

 <div class="button_container">
        <div class="rectangle red">
          <span class="label">红色</span> 
            <div class="block">
                <div class="mark r"></div>
                <div class="bag"></div>
            </div>
        </div>
        <div class="rectangle green">
            <span class="label">绿色</span> 
              <div class="block">
                  <div class="mark g"></div>
                  <div class="bag"></div>
              </div>
          </div>
          <div class="rectangle blue">
            <span class="label">蓝色</span> 
              <div class="block">
                  <div class="mark b"></div>
                  <div class="bag"></div>
              </div>
          </div>
</div>

 (function(){
     var marks = document.getElementsByClassName("mark")
     var show =  document.querySelector(".show")
     var bags =  document.getElementsByClassName("bag")
     var r = document.querySelector(".r")
     var g = document.querySelector(".g");
     var b = document.querySelector(".b");

     for(let i=0;i<marks.length;i++){
            marks[i].onmousedown=function(e){
            var x = e.clientX  // 当前的x坐标
            var left = this.offsetLeft;  // 据左边的距离  // 初始距离
            window.onmousemove = function(evt){
                    //获取到鼠标移动时候的位置
                    var disx = evt.clientX - x //鼠标移动的距离就是盒子移动的距离
                    var wx = disx+left         // 现在的坐标
                    wx<0?wx=0:wx>255?wx=255:wx
                    marks[i].style.left = wx+'px'
                    bags[i].style.width=wx+'px'
                    let rl = r.offsetLeft
                    let gl = g.offsetLeft
                    let bl = b.offsetLeft
                    let color = `rgba(${rl},${gl},${bl})`
                    document.querySelector('*').style.background= color
            }
            window.onmouseup = function(){
                window.onmousemove = null;
                window.onmouseup = null;
            }
        }
     }
   })()