1行お知らせバー"ティッカー"を表示できるJavaScript「jQuery WebTicker」

1行お知らせバーティッカーを表示できるJavaScript「jQuery WebTicker」 トップなどに省スペースで最新情報を次々に表示させているサイトがあります。
この、いわゆるティッカーをjQuery WebTickerならお手軽に表示させられます。

使用方法 jQuery WebTickerからjquery.webticker.jsをダウンロード。


<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").webTicker({
			travelocity: 0.1, //速さ
			direction: 1, //-1で逆に
	})
});
</script>
また、CSSを下記のように記述します。

<style>
.tickercontainer {  //ティッカー自体の大きさ
width: 500px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}

.tickercontainer .mask {
position: relative;
top: 8px;
height: 18px;
overflow: hidden;
}

ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}

ul.newsticker li { 
float: left;
margin: 0;
padding-right: 15px; //要素間の余白
}
</style>
あとはお知らせについて記述すれば完成です。

<ul id="id名">
	<li>1</li>
	<li>2</li>
	<!-- 以下個数分 -->
</ul>

sponsors

「1行お知らせバー"ティッカー"を表示できるJavaScript「jQuery WebTicker」」をシェアする

記事作成:
記事URL:

TOP > > 1行お知らせバー"ティッカー"を表示できるJavaScript「jQuery WebTicker」