Jquery 白色到黑色的颜色变化滑块Html？_Jquery_Html_Slider

Jquery 白色到黑色的颜色变化滑块Html？

jquery html

Jquery 白色到黑色的颜色变化滑块Html？,jquery,html,slider,Jquery,Html,Slider,因此，我尝试在html中构建一个滑块（使用jquery）来将站点的背景从白色更改为黑色（这是一个夜光项目的想法）我一直在互联网上寻找，并建立了一个工作的RGB滑块，但不能得到它只是白色到黑色，反之亦然。。。有人知道怎么做吗？我不希望它是彩虹的所有颜色只是两个哈哈我的代码如下： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuer

因此，我尝试在html中构建一个滑块（使用jquery）来将站点的背景从白色更改为黑色（这是一个夜光项目的想法）

我一直在互联网上寻找，并建立了一个工作的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>


jQuery UI滑块-颜色选择器
#红色、绿色、蓝色{
浮动：左；
清除：左；
宽度：300px；
利润率：15px；
}
#斯沃琪{
宽度：120px；
高度：100px；
边缘顶部：18px；
左边距：350px；
背景图像：无；
}
#红色.ui滑块范围{背景：#ef2929；}
#red.ui滑块句柄{边框颜色：#ef2929；}
#绿色.ui滑块范围{背景：#8ae234；}
#绿色.ui滑块句柄{边框颜色：#8ae234；}
#blue.ui滑块范围{背景：#729fcf；}
#blue.ui滑块句柄{边框颜色：#729fcf；}
函数hexFromRGB（r，g，b）{
变量十六进制=[
r、 toString（16），
g、 toString（16），
b、 toString（16）
];
$。每个（十六进制，函数（nr，val）{
如果（val.length==1）{
十六进制[nr]=“0”+val；
}
});
返回hex.join（“”.toUpperCase（）；
}
函数refreshSwatch（）{
var red=$（“#red”）.滑块（“值”），
绿色=$（“#绿色”）。滑块（“值”），
蓝色=$（“#蓝色”）。滑块（“值”），
hex=hexFromRGB（红色、绿色、蓝色）；
$（“#样例”）.css（“背景色”，“#”+hex）；
}
$（函数（）{
$（“红色、绿色、蓝色”）。滑块({
方向：“水平”，
射程：“分钟”，
最高：255，
价值：127，
幻灯片：刷新样本，
更改：刷新样本
});
$（“红色”）。滑块（“值”，255）；
$（“绿色”）。滑块（“值”，140）；
$（“蓝色”）。滑块（“值”，60）；
});

简易选色器

这里有一个简单的方法：

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

谢谢你，这真是太棒了，我想让它做什么，但当从JSFIDLE将其放入html时，它不会加载？添加到原始帖子您需要将代码放入文档就绪调用（）中或页面末尾。嗨，对不起，我以为我已经解决了这个问题，但我似乎仍然无法将文档“就绪”？不知道我哪里出了问题，我已经按照你提供的网页。。。很抱歉，这让我很痛苦。您是否将我发布的代码包装在文档就绪调用中，就像我链接到的页面所显示的那样？浏览器控制台中是否有任何错误？Yep$（document）.ready（函数（）{//code is here}）；