用于背景和字体颜色的 jQuery ui 滑块

Question

我有一个关于我的新网站设计前景的问题，它涉及使用一些 jQuery 和 jQueryUI（主要是 SliderUi）以及一些 css 操作。

每次我滑动#slider 时，.left 的宽度都会根据 (ui.value from 1-100 + '%') 进行更新，从这里开始滑动 + 背景过渡已经发生， 我的问题是是否有任何可能的方法来根据滑块的阈值或值来操纵文本的颜色？如果是的话，你能建议我怎么想出这样的事情吗？ 片段如下。 提前致谢！

$(document).ready(function() {
  $( "#slider" ).slider({
    max: 101,
    min:1,
    value: 51,
    slide: function(event,ui) { 
      var percentage = (ui.value)-1;
      $('.left').css("width",percentage +'%');		
    }
  });
});

#slider {z-index: 5;background: #666; }
.left, .right {positioackgrn:absolute; top: 0; left: 0; height: 100vh;}
.left {background: #000; width: 50%; z-index: 1;}
.right {background: #fff;  z-index: -1; width: 100%;}
.main-content {z-index: 3; position: absolute; top: 0; left: 0; width: 100%;}
h3 {color: blue; text-align: center; margin-top: 30px;}

<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="slider"></div>
<div class="left"></div>
<div class="right"></div>
<div class="main-content">
  <h3>A part of my font must change color depending on slider-ui threshold</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Answer 1

更新！ http://jsfiddle.net/lsubirana/7od3sfrr/1/

HTML：

<div id="slider"></div>
<div class="left"><h3>My font color must change depending on slider-ui threshold</h3></div>
<div class="right"><h3>My font color must change depending on slider-ui threshold</h3></div>

CSS：

.left, .right {position:absolute; top: 0; left: 0; height: 100vh;overflow:hidden;}
.left h3 {color: white; text-align: center; margin-top: 30px;width:100vw;}
.right h3 {color: black; text-align: center; margin-top: 30px;width:100vw;}

原答案： 获得所需内容的一种方法是将滑块百分比传递给可以返回 rgb 颜色值的函数。以下页面显示了如何在 javascript 中创建彩虹，我相信可以在这种情况下应用： http://krazydad.com/tutorials/makecolors.php

$(document).ready(function() {
  $( "#slider" ).slider({
    max: 101,
    min:1,
    value: 51,
    slide: function(event,ui) { 
      var percentage = (ui.value)-1;
      $('.left').css("width",percentage +'%');
      $('h3').css('color', rgb(percentage));
    }
  });
});

function rgb(p){
    var frequency = .08;
       r = Math.sin(frequency*p + 0) * 127 + 128;
       g = Math.sin(frequency*p + 2) * 127 + 128;
       b = Math.sin(frequency*p + 4) * 127 + 128;
     return  'rgb(' + Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b) + ')';
}

http://jsfiddle.net/lsubirana/376ow969/