便利eelife Java Script

   戻る


テーブルをスライドします。
テーブル@ テーブルA テーブルB テーブルC テーブルD
      



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<TABLE cellspacing="0" border="0">
<TBODY>
<TR>
<TD id="TBL1" width="100">テーブル@</TD>
<TD id="TBL2" width="100">テーブルA</TD>
<TD id="TBL3" width="100">テーブルB</TD>
<TD id="TBL4" width="100">テーブルC</TD>
<TD id="TBL5" width="100">テーブルD</TD>
</TR>
</TBODY>
</TABLE>
<INPUT type="button" value="≪-" onclick="chg_tblbk()">
<INPUT type="button" value="-≫" onclick="chg_tbl()">

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
T_l= 60;     // X座標の初期値 テーブルの左からの位置
T_x = 0;
T_w=100;   // 各セルの幅
C_l = 0;     // クリップの左の幅の初期値
i=0;          // テーブルの移動変数
M_x=0;      // X座標 テーブルの左からの位置の変数
ID_suu=5;   // セルの数この場合は5
v=0;         // セルの移動変数


function chg_tbl(){

if(v==0){v=1;}
Lyid = "TBL"+v;
if(v==ID_suu)return;
v++;
T_x = T_l;
i=0;

suraido()
}

function suraido(){
if(i<T_w+2){
M_x = T_x-i;
C_w=T_w+i;
C_l=i;
i++;
clp();
setTimeout("suraido()",10);
}
}


function chg_tblbk(){
if(v==0){v=1;}
if(v==1)return;
v--;
Lyid = "TBL"+v;
T_x = T_l-T_w;
i=0;
suraido_bk()
}

function suraido_bk(){
if(i<T_w+2){
M_x = T_x+i;
C_w=i;
C_l=T_w-i;
i++;
clp();
setTimeout("suraido_bk()",10);
}
}

function clp(){
C_Top = 0;        // クリップの左上の位置
C_Height = 100; // クリップの左下の位置
C_Width= C_w;   // クリップの右までの幅
C_Left = C_l;     // クリップの左の幅
document.getElementById(Lyid).style.left = M_x;
C_list ="rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)"
document.getElementById(Lyid).style.clip = C_list;   // クリップの表示
}

// -->
</SCRIPT>
コメント
クリップに ついて

下記のスタイルシートを</HEAD>の上に挿入してください。

<STYLE type="text/css">
<!--
#TBL1{
width : 100px;
height : 100px;
top : 50px;
left : 60px;
position : absolute;
z-index : 5;
color : aqua;
background-color : red;
}
#TBL2{
width : 100px;
height : 100px;
top : 50px;
left : 60px;
position : absolute;
z-index : 4;
color : black;
background-color : lime;
visibility : visible;
}
#TBL3{
width : 100px;
height : 100px;
top : 50px;
left : 60px;
position : absolute;
z-index : 3;
color : gray;
background-color : yellow;
visibility : visible;
}
#TBL4{
width : 100px;
height : 100px;
top : 50px;
left : 60px;
position : absolute;
z-index : 2;
color : yellow;
background-color : blue;
visibility : visible;
}
#TBL5{
width : 100px;
height : 100px;
top : 50px;
left : 60px;
position : absolute;
z-index : 1;
color : green;
background-color : fuchsia;
visibility : visible;
}
-->
</STYLE>