T
op
S
CRIPTS
AUTO
M
OBILES
D
OWNLOADS
L
INK
B
BS
A
BOUT
F
EEDBACK
画像先読みアニメ
説明
複数の画像を切り替えてアニメーション効果を出します。画像を切り替えるまでの待ち時間のうちに画像を先読みし、それが終わるまでは画像を切り替えません。
サンプル
Sample
ソースコード
HEADに記述
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- var imageFiles = new Array(); imageFiles[0] = "../atlantic.jpg"; //■画像ファイル名。imageFiles[3]、imageFiles[4]...というふうに増やせる。 imageFiles[1] = "../talbot.jpg"; imageFiles[2] = "../porsche356.jpg"; var timeOut = 3000; //■切り替え時間。 var isLoop = false; //■画像が終わりまで来たら、はじめに戻るか。trueで戻る、falseでそのまま。 var count = 0; var fileName var damy = new Image(); var startTime; var endTime; damy.onload = Timer function Timer(){ var D = new Date(); endTime = D.getTime(); timeOut2 = timeOut - (endTime - startTime); if(timeOut2 < 0){ timeOut2 = 1; } setTimeout("Animation()",timeOut2) } function Animation(){ if(count < imageFiles.length){ fileName = imageFiles[count]; document.images["imgAnime"].src = fileName; count++; if((isLoop) && (count >= imageFiles.length)){ count = 0; } nextFile = imageFiles[count]; var D = new Date(); startTime = D.getTime(); damy.src = nextFile; } } --> </SCRIPT>
BODYに記述
<BODY onload="Animation()"> <IMG SRC="" id="imgAnime">
解説・備考
画像ファイルが先読みできない場合はいつまで経っても画像が切り替わりません。
Netscapeではスクリプトで画像を切り替えたときはonLoadイベントが発生しないようなので、このスクリプトは使えません。
- [BACK] -
|
AUTO
M
OBILES
|
D
OWNLOADS
|
L
INK
|
B
BS
|
A
BOUT
|
F
EEDBACK
Copyright © 1999-2005 By よーすけ
mailto:<
web@@@write-off.cside.com
>