画像clipの応用 2
タイトル画像を
Sample Source......................................................................>>>
<SCRIPT language="JavaScript"><!--
var flg = true; //表示するか、消えるかを切り替えるフラグ変数
var cTop,cRight,cBottom,cLeft; //上、右,下、左のクリップ領域
function Start(){
if(flg)ClipShow(); //画像を表示
else ClipHide(); //画像を隠す
}
//・・・・・・・・・・・・・・(画像を表示)・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
function ClipShow(){ //表示を開始
cTop = 54;
cRight = 246;
cBottom = 62;
cLeft = 234;
PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
PIC.style.visibility = "visible";
BT.disabled = 1; //ボタンを無効にする
flg = false;
setTimeout("Show1()",1000);
}
function Show1(){
cRight += 2;
cLeft -= 2;
if(cRight <= 480){
PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
setTimeout("Show1()",20);
}else Show2();
}
function Show2(){
cTop -= 1;
cBottom += 1;
if(cTop >= 0){
PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
setTimeout("Show2()",20);
}else{
BT.innerText = "隠す";
BT.disabled = 0; //ボタンを有効にする
}
}
//・・・・・・・・・・・・・・・・・(画像を隠す)・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
function ClipHide(){ //隠すを開始
BT.disabled = 1; //ボタンを無効にする
Hide1();
}
function Hide1(){
cTop += 1;
cBottom -= 1;
if(cTop <= 54){
PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
setTimeout("Hide1()",20);
}else Hide2();
}
function Hide2(){
cRight -= 2;
cLeft += 2;
if(cRight >= 240){
PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
setTimeout("Hide2()",20);
}else{
BT.innerText = "表示する";
BT.disabled = 0; //ボタンを有効にする
flg = true;
}
}
//--></SCRIPT>
</head>
<P>タイトル画像を <button id="BT" onclick="Start()">表示する</button> </P>
<P><IMG id="PIC" style="position:absolute;top:180;left:230;visibility:hidden"
src="../../images/ban/home_aut.gif" width="480" height="116" border="0">
</P>