歩け！！踊り子
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var bw; //ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの横幅
var tt = 5; //ｽﾋﾟｰﾄﾞ(移動量)
function Start(){
//ﾍﾟｰｼﾞ読みこみ時
PIC.style.pixelLeft = -100;
//画像は左端に隠す
bw = document.body.clientWidth;
//ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳ幅を取得
PIC.style.filter = "fliph()";
//画像を左右反転する
MoveRight();
}
var timerR,timerL;
function MoveRight(){ //右へ移動
if(PIC.style.pixelLeft < bw - 100){ //右端に達するまで
PIC.style.pixelLeft += tt; //PICのLeft位置を増加
timerR = setTimeout("MoveRight()",100);
}else{ //右端に達したら
clearTimeout(timerR);
MoveLeft();
PIC.filters.fliph.enabled = false;//左右反転ﾌｨﾙﾀを無効に
}
}
function MoveLeft(){
//左へ移動
if(PIC.style.pixelLeft > 0){ //左端に達するまで
PIC.style.pixelLeft -= tt; //PICのLeft位置を減少
timerL = setTimeout("MoveLeft()",100);
}else{ //左端に達したら
clearTimeout(timerL);
PIC.filters.fliph.enabled = true;//左右反転ﾌｨﾙﾀを有効に
MoveRight();
}
}
function StopGo(){ //[止まれ]ﾎﾞﾀﾝ
if(bt1.innerText == "止まれ"){
clearTimeout(timerR);
clearTimeout(timerL);
bt1.innerText = "歩け";
}else{
bt1.innerText = "止まれ";
if(PIC.filters.fliph.enabled == false){
MoveLeft();
}else{
MoveRight();
}
}
}
function Speed(){
//ｽﾋﾟｰﾄﾞ調整ﾎﾞﾀﾝ
if(bt2.innerText == "速く"){
tt = 15;
bt2.innerText = "遅く";
}else{
tt = 5;
bt2.innerText = "速く";
}
}
//--></script>
</head>
<body onload="Start();">
<img id="PIC" style="position:relative;
width:80;height:115"
src="../../images/cut/odoriko.jpg">
<button style="color:red;font:13pt;" id="bt1"
onclick="StopGo();">止まれ</button>
<button style="color:navy;" id="bt2"
onclick="Speed();">速く</button>
end(最終更新:12/11/12)