Question

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

enter image description here

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

所以我正在做的是建立一个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;
    }

这就是我得到的：

enter image description here

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

enter image description here

客户现在可以更改年份，但问题是圆圈的背景颜色将始终保持不变，我想找到一种方式来改变它与jquery每次新年的背景圆圈在渐变上得到下一个颜色或类似的东西。

有什么想法吗？

Answer 1

从未尝试过这种类型的东西 - 在跟随颜色渐变或其他任何东西时改变颜色。认为它会比它更棘手。 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

使用jquery进行背景颜色更改转换

1 个答案: