これは私が達成しようとしていることです:
ユーザーは、さらに年を追加するオプションがあります(テキストとグラデーションの次の色を含む新しい円)。
つまり、私が行っているのは、それ自体を繰り返すことで上記のイメージを構築できる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で変更する方法を見つけたいと思います。グラデーションの色など。
何か案は?