1行ずつフェード表示するニュースティッカー/コンテンツ表示/SolidStateEveryday

ニュースティッカーjquery.newsticker.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> jQuery - newsticker</title> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.newsticker.js"></script> 
<script type="text/javascript"> 
$(document).ready(
	function()
	{
		$("#news").newsTicker(4500);
	}
);
</script> 
<style type="text/css"> 
body{margin:0; padding:0;background-color:#27201A;}
div{
  width:665px;
  padding:80px;
  padding-right:0px;
  background-color:#27201A;
}
#news {
  height:29px;
  margin:0;
  padding:0px;
  line-height:29px;
  font-size:11px;
  color:#CCC;
  list-style-type: none;
  background:url(bg.jpg) top left no-repeat;
}

#news li{
  padding:0 0 0 33px;
  background:url(bg2.jpg) top left no-repeat;
}
#news li span{
  margin-left:10px;
}

a{color:#CCC; text-decoration:none;}
a:hover{color:#999;}
</style>
</head> 

<body> 
<div>
<ul id="news"> 
	<li><a href="http://headlines.yahoo.co.jp/hl">Service of headline of circumstances report when Yahoo news newspaper and news agency, etc.</a></li> 
	<li><a href="http://news.google.co.jp/">Fresh news of the news source of 25,000 or more can be retrieved, and it see. </a></li> 
	<li><a href="http://sankei.jp.msn.com/">The MSN Sankei news is a news site that Microsoft and Sankei digital have jointly managed.</a></li> 
	<li><a href="http://www.nikkei.co.jp/">News site of Nihon Keizai Shimbun Inc..</a></li> 
</ul> 
</div>
</body> 
</html>

	jQuery - newsticker

新着情報などの li要素を1行ずつフェード表示するニュースティッカーです。
少ないスペースを効率的かつ印象的に利用できます。
このページで紹介しているのはちょっと古いバージョンですが、新しいのはタイプライター風でうっとおしいので、こちらの方が実用的かと思います。

セッティング

ダウンロード＆<head>設定

まずjquery.jsをお持ちでない方は、こちらからダウンロード。
次にダウンロードサイトへ行き、jquery.newsticker.jsをダウンロードしたら、両スクリプトをヘッダーに読み込ませます。

次に以下の設定を<head>要素内に行います。

#newsの部分はニュースティッカーを実装する<ul>に付加するIDです。
newsTicker(4500)の数値の部分でフェードの間隔を調整します。
増やすと表示の時間間隔も長くなります。

<ul id="news">
   <li><a href="http://headlines.yahoo.co.jp/hl">Service of headline of circumstances report when, etc.</a></li>
   <li><a href="http://news.google.co.jp/">Fresh news of the news source of 25,000 or more can</a></li>
   <li><a href="http://sankei.jp.msn.com/">The MSN Sankei news is a news site that Microsoft and </a></li>
   <li><a href="http://www.nikkei.co.jp/">News site of Nihon Keizai Shimbun Inc..</a></li>
</ul>　

後はこのように<ul>にIDを付加してやれば、その内部の<li>要素を一つずつ表示してくれるようになります。