skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

クールなニューススティッカーjavascript「JavaScript News Sticker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ニュース系サイトでは最新ニュースを流していくニューススティッカーという仕組みがあります。
JavaScript News Stickerでは、文字だけでなく画像をシンクロさせてニュースを流すことができます。

使用方法
JavaScript News StickerからstickerObj.jsをscript.aculo.usからscriptaculousなどをダウンロードします。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/scriptaculous.js" type="text/javascript"></script>
<script src="http://yourdomain/stickerObj.js" type="text/javascript"></script>
以上のようにheadに書き込んだら、表示したいニュースを以下の通りに記述します。
<div id="wrap">
<div id="text" style="display: none;">
<div id="realtext">
<h3 id="featuredHead"></h3>
<p id="featuredText"></p>
</div>
</div>
</div>
<ul id="featured" style="display: none;">
<!-- ここからN番目のニュース -->
<li id="story_N">
<h3 id="title_N">タイトル</h3>
<p id="text_N">ニュース内容</p>
<div id="bg_N">画像（パスのみ）</div>
</li>
<!-- ここまで -->
</ul>
なお、ニューススティッカー内はCSSで変更でき、以下はクールなニューススティッカーjavascript「JavaScript News Sticker」サンプルで使用している例です。
<style type="text/css">
#wrap {width:600px;height:280px;background:#fff url(ajax-loader.gif) no-repeat center center;border:1px solid #ccc;}
#wrap #realtext {background-color: #000;background:url(bg.png);width:600px;}
#wrap #text p {color:#ccc;padding:0 5px 8px 5px;margin:0;font-weight:normal;font-family:Tahoma;font-size:0.7em;}
#wrap #text h3 {color:#eee;padding:5px;margin:0;font-weight:normal;font-family:Tahoma;font-size:1.6em;border:0;}

#wrap #text h3 a {text-decoration:none;color:#fff;}
#wrap #text h3 a:hover {color:red;}
</style>

記事作成：2008年01月13日

前の記事：javascriptでCSSを操る「Dynamic CSS via JavaScript」
次の記事：jQueryでCSSを切り替えるjavascript「Switch stylesheets with jQuery」