Question

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

每当我滑动#slider时，.left的宽度将更新取决于（ui.value从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/

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

1 个答案: