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>
<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>
コメントする
記事作成：2011年12月21日 09:41
