白色到黑色變色滑塊Html？

所以我試圖在HTML（使用jQuery）中建立一個滑塊來將網站的背景從白色變爲黑色（其在黑暗項目中的發光）。白色到黑色變色滑塊Html？

我一直在尋找互聯網，並建立了一個工作滑塊的RGB，但不能得到它只是白色的黑色，反之亦然......任何人都知道如何做到這一點？我不想讓它成爲彩虹的所有顏色，只有兩個哈哈！

我的代碼如下：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Colorpicker</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 
    <style> 
    #red, #green, #blue { 
    float: left; 
    clear: left; 
    width: 300px; 
    margin: 15px; 
    } 
    #swatch { 
    width: 120px; 
    height: 100px; 
    margin-top: 18px; 
    margin-left: 350px; 
    background-image: none; 
    } 
    #red .ui-slider-range { background: #ef2929; } 
    #red .ui-slider-handle { border-color: #ef2929; } 
    #green .ui-slider-range { background: #8ae234; } 
    #green .ui-slider-handle { border-color: #8ae234; } 
    #blue .ui-slider-range { background: #729fcf; } 
    #blue .ui-slider-handle { border-color: #729fcf; } 
    </style> 
    <script> 
    function hexFromRGB(r, g, b) { 
    var hex = [ 
     r.toString(16), 
     g.toString(16), 
     b.toString(16) 
    ]; 
    $.each(hex, function(nr, val) { 
     if (val.length === 1) { 
     hex[ nr ] = "0" + val; 
     } 
    }); 
    return hex.join("").toUpperCase(); 
    } 
    function refreshSwatch() { 
    var red = $("#red").slider("value"), 
     green = $("#green").slider("value"), 
     blue = $("#blue").slider("value"), 
     hex = hexFromRGB(red, green, blue); 
    $("#swatch").css("background-color", "#" + hex); 
    } 
    $(function() { 
    $("#red, #green, #blue").slider({ 
     orientation: "horizontal", 
     range: "min", 
     max: 255, 
     value: 127, 
     slide: refreshSwatch, 
     change: refreshSwatch 
    }); 
    $("#red").slider("value", 255); 
    $("#green").slider("value", 140); 
    $("#blue").slider("value", 60); 
    }); 
    </script> 
</head> 
<body class="ui-widget-content" style="border:0;"> 

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> 
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 
    Simple Colorpicker 
</p> 

<div id="red"></div> 
<div id="green"></div> 
<div id="blue"></div> 

<div id="swatch" class="ui-widget-content ui-corner-all"></div> 


</body> 
</html>

來源

2015-01-07 June

這裏有一個簡單的方法：

$("#slider").slider({ 
    min: 0, 
    max: 255, 
    slide: function (event, ui) { 
     val = 255 - ui.value; 
     bkgrnd = 'rgb('+val+','+val+','+val+')'; 
     $('body').css('background-color',bkgrnd) 
    } 
});

jsFiddle example

來源

2015-01-07 15:05:36 j08691

謝謝那是輝煌，我希望它做的，但投入時來自jsFiddle的HTML不加載？添加至原始文章 – June

您需要將代碼放入文檔調用（http://learn.jquery.com/using-jquery-core/document-ready/）或頁面末尾。 – j08691

嗨，對不起，我以爲我有這個想法，但我仍然無法得到文件「準備好」？不知道我會錯在哪裏我跟着你提供的網頁...對不起，很痛苦 – June

白色到黑色變色滑塊Html？

回答

相關問題