skuare.net

ニュースティッカーを作成するjavascript「Innerfade with jquery」

Web上では、ニュースを次々と流すニュースティッカーと呼ばれる手法があります。
これを導入することで限られたスペースで動きのあるコンテンツ表示を可能にします。
MedienfreundeのInnerfade with jqueryを使用すれば、このニュースティッカーを表示することができます。

使用方法
Innerfade with jqueryからファイル群をダウンロードしheadに以下を書き込みます。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#id or .class').innerfade ({
animationtype: 'slide', // アニメーションの種類（slide or fade：デフォルト）
speed: 750, // フェイドスピード（ミリ秒 or slow,normal：デフォルト,fast）
timeout: 2000, // フェイドにかかる時間（ミリ秒、2000：デフォルト）
type: 'random', // スライドショーの種類（sequence：デフォルト or random）
containerheight: '1em' //囲んだ要素の高さ、auto：デフォルト
});
} );
</script>
あとはHTMLにリストを書き込めば完了です。
<ul id="id名">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
ニュースティッカーを作成するjavascript「Innerfade with jquery」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：フォームに吹き出しでヒントを出すjavascript「Hints.js」
次の記事：画像をズームするjavascript「loupe.js」

関連記事

• [jQuery]spinner
• [jQuery]SerialScroll
• [jQuery]scrollable HTML table
• スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」
• jQueryベースのニュースティッカーjavascript「liScroll」