便利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_W=Ly_W/2; //レイヤーの幅の真中
show()
}

function show(){
C_Top = 0; //クリップの左上の位置
C_Height= Ly_H; //クリップの左下の位置
C_Width = Mid_W +i; //クリップの右までの幅
C_Left = Mid_W -i; //クリップの左の幅
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_W){
i++; //クリップの左上,左下の位置の変数
setTimeout("show()",50);}
else{
setTimeout("hide()",2000);}
}


function hide(){
C_Top = 0;
C_Height=Ly_H;
C_Width = Mid_W +i;
C_Left = Mid_W -i;
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>
コメント
background-image : url(clip18.gif) は背景画像です。
このままでは表示できません。お手持ちの画像を入れてください。
上下に開くの応用です  こちらも参照