Demo: jQuery Counter Plugin

Demo #1: デフォルト

1. 初期の RC サクセション
2. 楽しい夕に
3. シングル・マン

$(function() {
  $('ol').setCounter();
});

Demo #2: オプション例

1. デイ・ドリーム・ビリーバー
2. 三部作
   1. 深刻な問題
   2. ブームブームブーム
   3. ビンジョー

$('ol').setCounter({
  markerType: '甲',
  markerRight: '、'
});
$('ol ol').setCounter({
  markerType: 'イ',
  markerLeft: '(',
  markerRight: ') '
});

ol ol li {
  display: inline;
}

Demo #3: スタイル例

1. I Like You
2. 空がまた暗くなる
3. あふれる熱い涙

$('#demo-03 ol').setCounter({
  start: 8,
  markerLeft: '#',
  markerRight: ' '
});

ol {
  padding: 0 0 0 4.0em;
}
ol li {
  position: relative;
  width: 100%;
}
ol li .marker {
  position: absolute;
  right: 100%;
  white-space: pre;
  font-weight: bold;
  color: #808080;
}
ol li .marker .marker-body {
  font: italic normal 1.93em/0.83 "Hoefler Text", Georgia, serif;
  color: #ff0000;
}