背景與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