Webサイト上での限られたスペースにお知らせなどの複数にわたる情報を表示させたい際に便利なニュースティッカー。
jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが 、今回はシンプルな動きのニュースティッカーを探した結果見つけたのが、クロスフェードでリンク画像を切り替える「InnerFade with JQuery」です。

ダウンロードは次のサイトより行う。
http://medienfreunde.com/lab/innerfade/

使い方
①jsファイルの読込み
ダウンロードしたjsファイルを読み込むために<heder>内に次のような一行を入れる。

<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.innerfade.js"></script>

②JavaScript

<script type="text/javascript">
$(function(){
	$('#news').innerfade({
		animationtype: 'slide',
		speed: 1000,
		timeout: 3000,
		type: 'sequence',
		containerheight: '1em'
	});
});
</script>

フェード効果などの設定は以下の通り。

• animationtype … ‘fade’か’slide’（デフォルトは’fade’）
• speed … ‘slow’か’nomal’か’fast’かミリ秒（デフォルトは’nomal’）
• timeout … ミリ秒（デフォルトは 2000）
• type … ‘sequence’か’random’か’random_start’（デフォルトは’sequence’）
• containerheight … （デフォルトは’auto’）

③HTML

<ul id="news">					
	<li>
		<a href="#n1">1 横浜に新しい空間がオープン</a>
	</li>
	<li>
		<a href="#n2">2 地下鉄ブルーラインがリニューアル</a>
	</li>					
	<li>
		<a href="#n3">3 関内駅に直結したショッピングセンターがオープン</a>
	</li>					
	<li>
		<a href="#n4">4 近代化する小田原城</a>
	</li>
	<li>
		<a href="#n5">5 相模湾に人工島ができる</a>
	</li>
	<li>
		<a href="#n6">6 政令指定都市「湘南市」が誕生</a>
	</li>					
	<li>
		<a href="#n7">7 箱根でサミット開催</a>
	</li>					
	<li>
		<a href="#n8">8 丹沢で山岳マラソン</a>
	</li>				
</ul>

サンプル

ニュースティッカー (animationtype: ‘slide’)

• 1 横浜に新しい空間がオープン
• 2 地下鉄ブルーラインがリニューアル
• 3 関内駅に直結したショッピングセンターがオープン
• 4 近代化する小田原城
• 5 相模湾に人工島ができる
• 6 政令指定都市「湘南市」が誕生
• 7 箱根でサミット開催
• 8 丹沢で山岳マラソン