読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jquery-webtickerを使って、文字が流れるティッカーを作ってみるサンプル

<スポンサーリンク>

なんか株価が流れる電光掲示板みたいに、ブラウザ上で文字が右から左へと流れる仕組みを作りたい。
ニュースとか、ツイートとか、動きながら右から左へ流れていくとちょっとカッコ良さそうだ。

で、そういうのを実装するのに適したライブラリがjquery-webticker。

本家のWebサイトは以下。
http://jonmifsud.com/open-source/jquery/jquery-webticker/

ソースはオープンソースとなっており、GitHubはこちら。
https://github.com/jonmifsud/Web-Ticker/

・サンプルとして紹介されているCSSはこちら。基本的にはこのCSSに手を加えていく形でサンプルを作る。
https://gist.github.com/jonmifsud/2628305

まず、実際にサンプルを動かした後のイメージはこんな感じになる。
流しているテキストは芥川龍之介の名言だ。渋い。
f:id:sho322:20140113123219j:plain

GitHubから落としてきた「jquery.webticker.js」と、サンプルのCSSをちょっと改変した「webticker.css」を以下のように読み込んでいる。

<link rel="stylesheet" type="text/css" href="./css/webticker.css">
<script type="text/javascript" src="js/jquery.webticker.js"></script>

さて、HTMLファイル全体はこんな感じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebTickerサンプル</title>
<link rel="stylesheet" type="text/css" href="./css/webticker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.webticker.js"></script>
<script type="text/javascript">
$(function() {
	$("#webticker").webTicker({
		travelocity: 0.2, /* 流れるスピード*/
		moving: true /* ティッカーがマウスオーバされたときに動作を停止させるかどうか*/
	});
	$("#stop").click(function(){
		$("#webticker").webTicker('stop');
	});
	
	$("#continue").click(function(){
		$("#webticker").webTicker('cont');
	});

});

</script>
</head>
<body>
<h2>jQuery Web Tickerを使って、ティッカー表示するサンプル</h2>
<ul id="webticker">
	<li>人生は一箱のマッチに似ている。重大に扱うのはばかばかしい。重大に扱わねば危険である。</li>
	<li>あなた方のお母さんを慈しみ愛しなさい。でもその母への愛ゆえに、自分の意志を曲げてはいけない。</li>
	<li>阿呆はいつも彼以外のものを阿呆であると信じている。</li>
</ul>

<button id='stop'>Stop Ticker</button>
<button id='continue'>Continue Ticker</button>
</body>
</html>

webticker.cssはこんな感じ。

.tickercontainer { /* the outer div with the black border */
width: 800px;
height: 80px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
top: 8px;
height: 10px; 
width: 1000px; /* ティッカーの帯の幅*/
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
height:30px;
/*left: 750px;*/
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding-right: 15px;
color: #008000; /* ティッカーの文字の色 */
font-size: large; /* ティッカーの文字のサイズ*/
background-color: black; /* ティッカーの背景色*/
}

これをブラウザで見ると、上記で見たような右から左へ流れるティッカー画面を実装することができる。