1

我有一个任务来安排标签的颜色。第一个标签包含浅色，第二个颜色比第一个更暗，第三个比第二个更暗，等等。{渐变颜色}为此我有给定的代码

  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit </p>
  </div>
  <div id="tabs-2">
    <p>Morbi</p>
  </div>
  <div id="tabs-3">
    <p>Mauris </p>
    <p>Duis cursus.</p>
  </div>
</div>


</body>
</html>

我怎样才能使用 jquery 做到这一点？演示

4

2 回答 2

1

做你想做的最简单的方法是了解HSL颜色模型。HSL 的好处在于，它可以让您仅通过修改其中一个变量来更改颜色的亮度——并且 CSS 接受 HSL（或如果您想要 alpha，则为 HSLA）作为有效的颜色说明符。

您需要做的是从给定的颜色开始，最好是 HSL 格式。（有很多从 RGB 到 HSL 的转换器，如有必要，只需谷歌“将 RGB 转换为 HSL”。）一旦你有了色相和饱和度，线性插值你拥有的标签数量的亮度值。（我不会将亮度绑定在 0 和 1 之间，而是将其绑定在 0.25 和 0.75 之类的值之间，这样你就不会出现让背景难以看清的极端情况。）

这是我制作的工作代码：

$(function () {
  $("#tabs").tabs();
});

var input_prefix = "hsl(0, 100%, ";
var li = $("#tabs li a");
var count = li.length;

if (count == 1) {
    // This is just here for thoroughness - my algorithm depends on at least 2 tabs
    li.css("color", input_prefix + "50%)");
} else {
    li.each(function (index) {
        // You want from lighter to darker, so start with the highest Lightness
        // 75 is what I'm setting as the upper percentage, and it's 50 percent from 
        // the start of 75 to the end of 25, divided over the number of elements.
        var value = 75 - (index * 50 / count);
        var color = input_prefix + value + "%)";
        $(this).css("color", color);
    });
}

看看我的解决方案。

于 2013-04-26T14:51:05.047 回答
0

请检查这个小提琴： http: //jsfiddle.net/5zfyU/3/ 关键是向li元素添加类：

class="gradient_me"

然后，在创建选项卡后，each将它们全部和依赖颜色index。例如：

$('.gradient_me').each( function(index) {
      var color = 255-index*75;
      $(this).css('color', 'rgb('+color+', 0, 0)');
});
于 2013-04-26T14:39:33.260 回答