4

这就是我想要实现的目标：

在此处输入图像描述

用户可以选择添加更多年份（带有文本的新圆圈和渐变中的下一种颜色）。

所以我正在做的是构建一个 div，通过重复它可以构建上面的图像。

这是标记：

     <a href="javascript:void(0)" class="timeline_box">
        <span class="timeline_dot"></span>
        <span class="timeline_year">2003</span>
    </a>

这是CSS：

    a.timeline_box{
        background: url('../images/timeline_bg.png') no-repeat 15px -2px;
        display: block;
        width: 56px;
        height: 20px;
        float: left;
    }
    span.timeline_dot{
        display: block;
        height: 14px;
        width: 14px;
        background-color: #ff845a;
        -moz-border-radius: 5px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 5px;
        border-radius: 10px;
    }
    span.timeline_year{
        color: #b6b6b6;
        font-size: 10px;
        font-style: italic;
        font-family: Georgia, Times, "Times New Roman", serif;
        vertical-align: top;
    }

这就是我得到的：

在此处输入图像描述

如果我重复timeline_box，它开始构建良好：

在此处输入图像描述

客户现在可以更改年份，但问题是圆圈的背景颜色将始终保持不变，我想找到一种使用 jquery 更改它的方法，即每个新年，圆圈的背景都会成为下一个渐变上的颜色或类似的东西。

有任何想法吗？

4

1 回答 1

3

从来没有尝试过这种东西——在跟随颜色渐变或其他的时候改变颜色。认为它会比它更棘手。hsl 颜色格式使它很容易做到。要“跟随渐变”，您只需要不断增加 hsl 中的 h - 逻辑很简单。

这是javascript：

var $box = $('.timeline_box'),
    h_val = 0;

function addBox () {
  var $new_box = $box.clone();
  h_val += 17; //change this value to change the amount of color change

  $new_box
    .find('.timeline_dot')
    .css('background', 'hsl('+ h_val +', 100%, 68%)') //change the "s" and "l" values to your liking
    .end()
    .appendTo('body'); 
}

$('#el').on('whatever', addBox);

甚至不需要在任何时候将 h 重置为 0。h 可以一直持续下去，它只会继续循环渐变。

这是一个 jsbin：http: //jsbin.com/oqifoq/1/edit

于 2013-01-17T01:42:48.097 回答