Odometerを実装してみる

Odometer というカッチョイイJSを実装してみました。

仕様

• クリックしたら数値変わる
• クリック用のナビゲーションつけよう

実装

HTML

<ul>
<li id="month" class="select">月額</li>
<li id="year">年額</li>
</ul>

<div>
<p><span class="odometer plan_a">420</span>円</p>
<p><span class="odometer plan_b">840</span>円</p>
</div>

JS

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/odometer.min.js"></script>

<script>
  $(document).ready(function() {
    $("#year").click( function() {
      $('.plan_a').html("5,040");
      $('.plan_b').html("10,080");
      $(this).addClass("select");
      $("#month").removeClass("select");
    });
    $("#month").click( function() {
      $('.plan_a').html(420);
      $('.plan_b').html(840);
      $(this).addClass("select");
      $("#year").removeClass("select");
    });
  });
</script>

CSS

<link rel="stylesheet" href="/css/odometer-theme-default.css" />

解説

.odometer を適用したいタグに付与するだけで簡単に実装ができます。
2つある時にはもう1個区別用のクラスを設定しておいて、JSでの書き換えにはそっちのクラスを指定してあげます。
CSSの中にある、ホニャララtransform 1s　 ←ここでスピード変えられますので、検索置換で全部変えます。