便利eelife Java Script

   戻る

レイヤ−を上下に開閉します。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="format();">
<DIV id="xypos" style="position : absolute ;
left : 390px;
top : 30px;
width : 200px;
height : 400px;
z-index : 1;
visibility : visible;
background-image : url(clip18.gif);

"></DIV>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
function format(){
i=0;   // クリップの左上,左下の位置を取得する変数
Ly_W = document.all["xypos"].style.width;  //レイヤーの幅 pxで表示
Ly_H = document.all["xypos"].style.height;  //レイヤーの高さ pxで表示
Ly_W = parseInt(Ly_W.substr(0,Ly_W.length-2));  //レイヤーの幅px 表示を数値に転換
Ly_H = parseInt(Ly_H.substr(0,Ly_H.length-2));  // レイヤーの高さ px表示を数値に転換

Mid_H=Ly_H/2; //レイヤーの高さの真中
show()
}

function show(){  // 開く時の関数
C_Top = Mid_H -i;  // クリップの左上の位置
C_Height = Mid_H +i;  // クリップの左下の位置
C_Width=Ly_W;   // クリップの右までの幅
C_Left = 0;       // クリップの左の幅
C_list ="rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)"
document.getElementById("xypos").style.clip = C_list; //クリップの表示

if (i<=Mid_H){
i++;  // 上下の位置を1ずつ開くshow()
setTimeout("show()",50);}  // show() を繰り返します
else{  // 開き切ったら閉じていきます
setTimeout("hide()",2000);}
}

function hide(){  // 閉じる時の関数
C_Top =Mid_H -i;
C_Height = Mid_H +i;
C_Width=Ly_W;
C_Left = 0;
C_list ="rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)"
document.getElementById("xypos").style.clip = C_list;
if (0<i){
i--;
setTimeout("hide()",50);}
else{  // 閉じたら今度は開きます
setTimeout("show()",2000);}
}

// -->
</SCRIPT>
コメント
レイヤー

クリップ