jQueryを利用してシンプルなティッカーを作る

2014.08.25　Posted by Coding_team

Webライティング

こんにちは。ウェブラボ技術メモ第4回目です。

今回はjquery.simpleTicker.jsを使ってシンプルなニュースティッカーを作ってみたいと思います。

ティッカーとは…
特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。
IT用語辞典より

新幹線の車内や看板、証券取引所などにある電光掲示板と言えば想像がつくと思います。
これをサイトに設置したいと思います。

今回はjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

■HTML head内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.simpleTicker.js"></script>
<script>
$(function(){
  // ここでエフェクトの種類を指定します。
  $.simpleTicker($("#ticker-fade"),{'effectType':'fade'}); //フェードイン
  $.simpleTicker($("#ticker-roll"),{'effectType':'roll'}); //縦スライド
  $.simpleTicker($("#ticker-slide"),{'effectType':'slide'}); //横スライド
});
</script>

$(function(){

// ここでエフェクトの種類を指定します。

$.simpleTicker($("#ticker-fade"),{'effectType':'fade'}); //フェードイン

$.simpleTicker($("#ticker-roll"),{'effectType':'roll'}); //縦スライド

$.simpleTicker($("#ticker-slide"),{'effectType':'slide'}); //横スライド

});

</script>

HTMLはリストを作るだけです。
さきほどheadで指定したid（#ticker-fade）を指定するのを忘れないようにしましょう。

■HTML

<div id="ticker-fade" class="ticker">
    <ul>
    <li>テスト1 ここにテキストが入ります</li>
    <li>テスト2 ここにテキストが入ります</li>
    <li>テスト3 ここにテキストが入ります</li>
    <li>テスト4 ここにテキストが入ります</li>
    <li>テスト5 ここにテキストが入ります</li>
    </ul>
</div><!--/#ticker -->

<ul>

<li>テスト1 ここにテキストが入ります</li>

<li>テスト2 ここにテキストが入ります</li>

<li>テスト3 ここにテキストが入ります</li>

<li>テスト4 ここにテキストが入ります</li>

<li>テスト5 ここにテキストが入ります</li>

</ul>

</div>

CSSはある程度自由に指定が出来ますが、シンプルに作成するデモでは下記のようにします。

■CSS

.ticker {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color:#ffffff;
}

.ticker ul {
  width: 100%;
  position: relative;
}

.ticker ul li {
  width: 100%;
  display: none;
}