電球の調光効果のための黄色のスライダーを作成

Question

私はフロントエンドのWeb開発では初心者ですが、調光と明るさの効果を与える電球にリンクされたスライダーを作成するタスクが与えられました。スライダーが操作されます。誰もがこれで私を助けてもらえますか？

Answer 1

divの背後に配置された電球の画像を色で表示するには、いくつかのファンシーなCSSを実行する必要がありますが、私はここで見ることができる基本的な例を作りました：https://jsfiddle.net/IsaacAdni/q56zkf2t/。基本的に

、あなたも（以下に示されていない）、CSSを使用して、幅と高さで見本をスタイリング2つのdiv、作成します。そして、あなたがそれらのいずれかのjQueryを使用してスライダを作る

<div id="yellow"></div> 
<div id="swatch"></div> 

を：

$("#yellow").slider({ 
    orientation: "horizontal", 
    range: "min", 
    max: 255, 
    value: 127, 
    slide: refreshSwatch, 
    change: refreshSwatch 
}); 

スライダの位置が変更されるたびに関数refreshSwatchが呼び出されるようになりました。私たちは、見本の不透明度を変更するには、この機能を使用することができます。見本を作る

function refreshSwatch() { 
    var yellow = $("#yellow").slider("value"); 
    var alpha = yellow/255; 
    $("#swatch").css("background-color", "rgba(255, 255, 0, " + alpha + ");"); 
} 

は、電球の画像の上に表示される難しい部分になりますが、私はあなたにそれを任せます。