Web うぇっ部

時間差で見せたい情報を見せるのに、時にはＦＬＡＳＨよりも効果的なのがJavaScriptを使った開閉インターフェイス。ソースが落ちているので、使うのはそのまま。流れだけ見ていきたいと思います。

Step1 div要素を用意
・マージンを０に。
・わかりやすいID名をつける。
<div id="title" style="height:200px"></div>
<div id="boxA" style="height:15px"></div>
<div id="boxB" style="height:15px"></div>
<div id="boxC" style="height:15px"></div>
<div id="boxD" style="height:15px"></div>

Step2 div要素に色をつける。
<style type="text/css">
<!--
カラーの設定
-->
</style>

Step3 動きのエンジンとなるスクリプトを書く
・getElementByldでIDを指定して数値を変更。
・onclickでクリック時にファンクションを呼び出す。

～～～～～～～～～～～～～JavaScript Tag～～～～～～～～～～～～～
<script type="text/javascript">
<!--
function boxResize(id, targetNum) {

 var speed = 8;  //スピード
 var id;         //動かすid
 var targetNum;  //目標とする数値
 var currentNum; //現在の数値
 var newNum;     //新しく設定する数値
 
 //現在の数値を取得
 currentNum = eval(document.getElementById(id).style.height.replace("px", ""));
 
 //新しい数値の計算
 newNum = currentNum + (targetNum - currentNum) / speed;

 //新しいサイズを設定
 document.getElementById(id).style.height = newNum + "px";
 
 //ループ処理
 if (currentNum > targetNum*0.95){
  document.getElementById(id).style.height = targetNum + "px";
 }else{
  setTimeout("boxResize(\'"+id+"\',"+targetNum+")", 10);
 }
}
～～～～～～～～～～～Step1で記述したdiv要素に指定～～～～～～～～～～～
<div id="boxA" onClick="boxResize" ('boxA',300)" style="height:15px;"></div>
<div id="boxB" onClick="boxResize" ('boxB',300)" style="height:15px;"></div>
<div id="boxC" onClick="boxResize" ('boxC',300)" style="height:15px;"></div>
<div id="boxD" onClick="boxResize" ('boxD',300)" style="height:15px;"></div>

Step4 開閉するスクリプトを完成させる
・上記のboxResize()を呼び出す為のdivごとのファンクションを用意。
・それぞれのボックスに開いた状態のheight:300;を設定。それ以外の閉じている状態は15pxで。
・ファンクション名「on○」
・function allClose()で全て閉じた状態の15pxに。

function onA() {
 boxResize('title', 150);
 boxResize('boxA', 300);
 boxResize('boxB', 15);
 boxResize('boxC', 15);
 boxResize('boxD', 15);
}
function onB() {
 boxResize('title', 200);
 boxResize('boxA', 15);
 boxResize('boxB', 300);
 boxResize('boxC', 15);
 boxResize('boxD', 15);
}
function onC() {
 boxResize('title', 300);
 boxResize('boxA', 15);
 boxResize('boxB', 15);
 boxResize('boxC', 200);
 boxResize('boxD', 15);
}
function onD() {
 boxResize('title', 100);
 boxResize('boxA', 15);
 boxResize('boxB', 15);
 boxResize('boxC', 15);
 boxResize('boxD', 300);
}
function allClose() {
 boxResize('title', 200);
 boxResize('boxA', 15);
 boxResize('boxB', 15);
 boxResize('boxC', 15);
 boxResize('boxD', 15);
}
//-->
</script>