電光掲示板の様な流れるテキストを表示するタブに<marquee>というもがある。

<marquee>
文字が流れます
</marquee>

しかし、これは独自仕様の要素でHTMLの仕様書にはどこにも書かれていない。

そこで、この代わりに、jQueryを使って実現する。

サンプル

以下のソースをダウンドードする。

ヘッダに以下のソースを記述する

<link rel="stylesheet" href="li-scroller.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#ticker01").liScroll({travelocity: 0.15});
});
</script>

「travelocity」は速さを表し、数値が大きいほど速くなる。

HTMLを記述する

<ul id="ticker01">
<li><a href="#">サンプルテキスト1</a></li>
<li><a href="#">サンプルテキスト2</a></li>
<li><a href="#">サンプルテキスト3</a></li>
<li><a href="#">img src="003.gif" width="16" height="16" alt="車" /></a></li>
</ul>

参照:
liScroll (a jQuery News Ticker made easy) 1.0
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

http://webscripts.softpedia.com/scriptDownload/jquery-liScroll-Download-70374.html


コメント & トラックバック

Chromeでは動くのですが、IEだと長い文章が固定されている状態になってしまいます。
こうすれば解決するかも等々ご教示いただけますでしょうか。

コメントする

KUMAOの押入TOP

  • 累積 666530
  • 本日 105
  • 昨日 117
  • 累積PV 2134733
  • 本日のPV 134
  • 昨日のPV 143
  • 現在の閲覧 0

カレンダー

2011年11月
« 10月   12月 »
 123456
78910111213
14151617181920
21222324252627
282930  

カテゴリー

最近のコメント

アーカイブ

年間アーカイブ

Twitter

Get Adobe Flash player