阿波の踊子
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function Init(){ //画像の初期化
PIC.style.filter =
"fliph(enabled=1)";//左右反転ﾌｨﾙﾀ
PIC.style.pixelLeft = 30;
}
var dx = 25; //移動量
var timerID = null;
var timerRan = null;
function Dance(){ //単純に踊る場合
if(timerRan != null)clearTimeout(timerRan);
//左右反転ﾌｨﾙﾀが有効な場合は無効にし、無効な場合は有効に
PIC.filters.fliph.enabled =
(PIC.filters.fliph.enabled == 1) ? 0 : 1;
PIC.style.pixelLeft += dx; //画像の位置を移動
//画像が左右端に達したら、移動量dxの符号を反転する
if(PIC.style.pixelLeft > document.body.clientWidth
- 130 || PIC.style.pixelLeft < 30)dx =
-dx;
timerID = setTimeout("Dance()",1000);
}
function DanceRan(){ //やや変化をつけて踊る場合
if(timerID != null)clearTimeout(timerID);
PIC.filters.fliph.enabled =
(PIC.filters.fliph.enabled == 1) ? 0 : 1;
PIC.style.pixelLeft += dx;
if(PIC.style.pixelLeft > document.body.clientWidth - 130
|| PIC.style.pixelLeft
< 30)dx = -dx;
//0.2〜1.2秒の範囲内でﾗﾝﾀﾞﾑな時間間隔を設定
timerRan = setTimeout("DanceRan()",
Math.ceil(Math.random()*6)*200);
}
//--></script>
</head>
<body onload="Init();">
<img id="PIC" style="position:relative;
width:100;height:150"
src="../../java/jadata/pic01.jpg">
<hr style="position:absolute;top:200;left:50"
width="90%" noshade size="10"
color="#804040">
<button onclick="Dance();">単純に踊る</button>
<button onclick="DanceRan();">やや変化をつけて踊る</button>
<button onclick="clearTimeout(timerID);clearTimeout(timerRan);">
休憩</button>
end(最終更新:12/11/12)