JSは===簡単なパレットを実現します

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <TITLE> </ TITLE> 
    <スタイルタイプ= "テキスト/ cssの"> 
        * {マージン：0;パディング：0 ;} 
        ■は{幅：500pxなど;高さ：400ピクセル;マージン：100pxに自動;} 
        .red、.green、.blue {幅：275px;高さ：20ピクセル。フロート 1ピクセル固体#eeeと、マージン：境界;相対：;：位置を左10pxの、色：白、行の高さ：20ピクセル、テキスト整列：センター; USER- 選択：なし} 
        .mark {幅：20ピクセルと、高さ： 20ピクセル、背景：#CCC;位置：絶対;カーソル：ポインタ;左： 0;上部：0 ;} 
        .SHOW {幅100ピクセル、高さ100ピクセル;ボーダー：1ピクセル固体＃ 000。フロート：左;マージン左：は50px;マージントップ： - は50px;} 
        .bag {幅： 0;高さ：20ピクセル;位置：絶対;左：0;トップ：0 ;}   // divの初期値の背景色には0幅、背景色である
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　スライドの数は、幅の数になるように、背景色ははるかに表示することができ 
        ; {赤背景} .red .bag 
        .green .bag {背景：緑;} 
        .blue .bag {背景：ブルー;}
     </スタイル> 
</ head> 
<body> 
    <DIV CLASS = "箱"> 
        <DIV CLASS = "赤"> 
            <DIV CLASS = "R＆LTマーク"> R＆LT </ div>    //スライダー 
            の<divクラス= "バッグ"> </ div>       //背景色がスライドに表示されています上記距離 
        </ DIV> 
        <DIV CLASS = "グリーン"> 
            <DIV CLASS = "マークG"> G </ DIV> 
            <DIV CLASS = "袋"> </ div> 
        </ div>
        <DIV CLASS = "青"> 
            <DIV CLASS = "マークB"> B </ DIV> 
            <DIV CLASS = "バッグ"> </ div>聞かせてI = 0 
        </ div>

        <DIV CLASS = "ショー"> </ div> 
    </ div> 


    <スクリプトタイプ= "テキスト/ javascriptの"> のvarマーク= document.querySelectorAll（ "マーク。" ）;
        VaRのショー= document.querySelector（ "ショー。" ）;
        VaRの R = document.querySelector（ "R" ）
         VAR G = document.querySelector（ "G" ）。
        VaRの B = document.querySelector（ "B" ）。VaRの袋= document.querySelectorAll（ "バッグ。" ）; 用（; iはmarks.lengthを<; iは++ ）{ 
            マーク[I]。
        

        

        

            ときにマウスダウン現在位置マウスを取得
            
                VAR X = evt.clientX;
                 // 現在のマークは、座標取得
                
                VARを =左この.offsetLeftと、
                

            window.onmousemove = 関数（EVT）{ 
                
                // マウス移動の時間位置取得
                VARを DISX evt.clientX = - X @ ボックスを移動するマウスからから移動し
                // カセットケースの座標
                VaRの WS =左+ DISX;      
                WS <= 0 WS 0？：WS; 　　//スライダーを作るには、常にボックスの内側に存在しています
                WS？> 255 WS = 255 ：WS; 
                マーク[I] .style.left = WS + "PX" 。
                袋[i]は.style.width = WS + "PX" 。

                show.style.background = `RGB（$ {r.offsetLeft} $ {g.offsetLeft} $ {b.offsetLeft}）` //模板字符串RGB（255,0,0）

                 
            } 
            window.onmouseup = 関数（）{ 
            
                window.onmousemove = NULL ; 
                window.onmouseup = nullを。
            } 
        } 
        }
        
     </ SCRIPT> 
</ body> 
</ HTML>

問題解決のアイデア：

即ち、距離の値は、スライダ圧延=== RGB色座標値

1.スライダーの距離

「マウス+ offsetLeft == ===現在の座標値の移動距離は、RGBのカラー値であります

2.背景色のスライド番号は何ですか

*当初、私は出て来てほしくありませんでした*

上記で、どこで表示するように背景色を表示するように設計されたdiv要素、および背景色を追加し、私のスライダースライド決定に従って。

0背景：だから、最初のdiv幅に設定され、赤色および幅を割り当てスライドブロックのスライド距離が、その結果は、背景色に対応して表示させることができます。

ファイル：/// E：/％E6％9E％97％E9％9C％9C％E9％9B％AAJS /すべて％E7％BB％83％E4％B9％A0ppt / RGB％E9％A2％9C％E8 ％89％B2.html

JSは===簡単なパレットを実現します

おすすめ