クールなニューススティッカー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」

関連記事

• 画像ギャラリーの定番javascript「LightBox」
• 画像に3Dの反射効果を与えるjavascript「3d image reflection with javascript」
• iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」
• [prototype]Fast Loader
• [prototype]Protoload

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」