ニュースやお知らせなんかに使えるティッカー「jQuery WebTicker」を使ってみました。テキストが滑らかに流れていくので目を引かせたい時に効果がありそうですね。使い方もほぼプラグインを読み込むだけなのでとてもシンプルです。ということで以下使い方です。
[ads_center]
使い方
jQuery本体とプラグインを読み込み、WebTickerをセットします。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(function(){
$('#webTicker').webTicker();
});
</script>
公式サイトにサンプルのCSSもダウンロードできるのでそれも読み込んでおきます。
<link href="webticker.css" rel="stylesheet" type="text/css">
ティッカーにするHTMLです。
<ul id="webTicker">
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
<!-- 略 -->
</ul>
これだけでOKです。
オプションはスピードと流れる方向を指定することができます。以下のように指定します。
<script type="text/javascript">
$(function(){
$('#webTicker').webTicker({
travelocity: 0.05, // スピード
direction: 1, // 方向
});
});
</script>
ということで、とても使いやすくてオススメです。ニュース系のサイトなんかにはぴったりですね。以下からダウンロードできます。
jQuery WebTicker — jQuery | Open Source | Jon Mifsud
また、他のティッカーのプラグインで「JQUERY NEWS TICKER」というのがあるんですが、こちらもお洒落なティッカーなのでよかったら参考にしてみて下さい。
