【概要】
jQueryというJavaScriptのライブラリがあります。
これを使えば自力でJavaScriptを書くよりも楽に記述することができるようになります。
ＤＯＭやスタイルシート記述がある程度わかる人ならば、より簡単に使いこなせるようになると思います。
先ほどFirefoxで表示してみたらjQueryが機能していなかったので少し手直し（更新2010/12/29）
その１、アコーディオンパネル
$(document).ready(function(){ $("#test1 dl,#test1 dl dt,#test1 dl dd").css({margin:"1px",padding:"4px 10px"}); $("#test1 dl").css("width", "300px"); $("#test1 dl dt").css({backgroundColor:"Gray",cursor:"pointer"}); $("#test1 dl dd").css({border:"1px solid Gray",height:"200px"}); $("#test1 dl dd:not(:first)").css("display","none"); $("#test1 dl dt").click(function(){ if ($(this).next().css("display") == "none") { $("#test1 dl dd").slideUp(); $(this).next().slideDown(); } }); }); - ∵ アコーディオンパネルの
- 動作テスト
- ∵ アコーディオンパネルを
- 使うとコンテンツをせまい場所に盛り込むことができるようになります。
- ∵ アコーディオンパネルは
- せまい土地問題を解決できるかも知れません。
その２、ニュースティッカー
$(function(){alert(jQuery.fn.jquery);});$(document).ready(function(){ var intervals = 5000; var news = ['■ ニュース速報 をこんな感じで','■ 次から次へと流していき','■ 注目を惹きつけて','■ 読んでもらうことができます。']; var curnews = 0; $("#news").css({position:"absolute",top:"0"}); setInterval(function(){ $("#news").css("left","350px").html(news[curnews]); $("#news").animate({left: "0px"}, "slow", "swing"); if (++curnews == news.length){ curnews = 0; } }, intervals); });