背景与jQuery

Question

这种颜色的变化转变就是我正尝试实现：

用户将不得不增加更多的年（一个新的圈子文本，并在接下来的颜色的选择梯度）。

所以我在做什么是建立一个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来改变它与每一位新的一年圆的背景在渐变上得到下一个颜色或类似的东西。

任何想法？

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