白色到黑色变色滑块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？

回答

相关问题