JS === achieve simple palette

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{width: 500px;height: 400px;margin:100px auto;}
        .red,.green,.blue{width: 275px;height: 20px;float: left;position: relative;border:1px solid #eee;margin:10px;color:white;line-height: 20px;text-align: center;user-select: none}
        .mark{width:20px;height: 20px;background:#ccc;position: absolute;cursor: pointer;left:0;top:0;}
        .show{width: 100px;height: 100px;border:1px solid #000;float: left;margin-left:50px;margin-top:-50px;}
        {width .bag: 0; height: 20px; position: Absolute; left: 0; Top: 0 ;}   // div to the background color of the initial value is 0 width, background color 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　so that the number of slides, is the number of width, background color can be displayed much 
        .red .bag {background: Red;} 
        .green .bag {background: Green;} 
        .blue .bag {background: Blue;}
     </ style> 
</ head> 
<body> 
    <div class = "Box"> 
        <div class = "Red"> 
            <div class = "R & lt Mark"> R & lt </ div>    // slider 
            <div class = "Bag"> </ div>       // background color has been displayed in the slide distance above 
        </ div> 
        <div class = "Green"> 
            <div class = "Mark G"> G </div>
            <div class="bag"></div>
        </div> 
        <div class = "Blue"> 
            <div class="mark b">b</div>
            <div class="bag"></div>
        </div>

        <div class="show"></div>
    </div>


    <script type="text/javascript">var marks = document.querySelectorAll(".mark");
        var show = document.querySelector(".show");
        var r = document.querySelector(".r")
        var g = document.querySelector(".g");
        var b = document.querySelector(".b");var bags = document.querySelectorAll(".bag");for( ; i < marks.length;i++){
            marks[i].onmousedown //(if any) {
                function=
        

        

        let i = 0

             Get the mouse when the mouse-down current location 
            
                var X = evt.clientX;
                 // Get the current mark coordinate 
                
                var = left the this .offsetLeft; 
                

            window.onmousemove = function (EVT) { 
                
                // Get the time position of the mouse movement 
                var disx evt.clientX = - X @ from mouse to move the box is moved from the 
                // coordinates of the cassette case 
                var WS = left + disx;      
                WS <= 0 WS 0? : WS; 　　// make the slider is always present in the inside of the box 
                WS > WS = 255 255? : WS; 
                Marks [I] .style.left = WS + "PX" ; 
                Bags [I] through .style.width,= ws + "px";

                show.style.background= `rgb(${r.offsetLeft},${g.offsetLeft},${b.offsetLeft})`  // 模板字符串 rgb(255,0,0)

                
            }
            window.onmouseup = function(){
            
                window.onmousemove = null;
                window.onmouseup = null;
            }
        }
        }
        
    </script>
</body>
</html>

Problem-solving ideas:

I.e., the value of the distance coordinate slider rolling === rgb color value

1. The distance of the slider

Distance of movement of the mouse + offsetLeft == === current coordinate value "is the color value of the rgb

2. What is the background color slide number

* Initially I did not want to come out *

In the above and add a div, designed to show the background color, and background color to show where, according to my slider slide where decision.

So initially set to the div width: 0 background: red and the sliding distance of the sliding block assigned width, so that can be displayed corresponding to the background color.

file:///E:/%E6%9E%97%E9%9C%9C%E9%9B%AAJS/all%E7%BB%83%E4%B9%A0ppt/rgb%E9%A2%9C%E8%89%B2.html

JS === achieve simple palette

Guess you like