画像が次々と回転しつつ切り替わっていくように見えなくもない代物を作ってみました。Spinと言うと旋回なんで、ちょっと違う気がしないでもないですが気にしないでください。IE6、NN7で動作を確認しました。なんかいい使い道を見つけたら、好きに使ってください。使い方がよくわからないよトニー、という人は掲示板にでも書いたってください。メールでもいいけど。
JavaScriptがOFFになっています。 等倍、ウェイト制御部あり、ファイル名順表示。もしくは、ブラウザが対応していません。 |
JavaScriptがOFFになっています。 1.5倍、ウェイト制御部なし、ランダム表示。もしくは、ブラウザが対応していません。 |
下記のファイルをDLして拡張子を「js」に変更し、設置したいHTMLファイルと同じディレクトリに置いてください。文字コードはSJISです。外部JSファイルを利用する際には、HTMLファイルと文字コードと合わせる必要がありますので、HTMLファイルをEUCで記述しているなどという場合には、適宜変換してお使いください。
spinAnime.txt
もう一つ、こちらの画像ファイル（none.gif）も同じ場所に置いてください。
表示させる画像ファイルはテキトーなフォルダに入れ、1から始まる連番のファイル名をつけておいてください（flie001.png, file002.png, ...）。画像の（縦横の）サイズは全部同じにしておいた方が良いです。
あとは以下のような感じでテキトーに記述してください。上の例（左側）を表示させるためのソースです。
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-script-type" content="text/javascript"> <!-- 「spinAnime.js」を外部ファイルとして読み込む --> <script type="text/javascript" src="spinAnime.js"></script> <script type="text/javascript"><!-- function startup() { spinAnime = new Array(); <!-- SpinAnimeクラスのインスタンスを生成 --> spinAnime['cg'] = new SpinAnime('cg', 'sample/','sample','jpg',2,160,120,6,80,50,'on',100,5,25,'inOrder'); } //--> </script> </head> <!-- ページの読み込み時に実行開始 --> <body onload="startup()"> <!-- 画像書き出し（表示）用の要素 --> <div id="cg" align="center"></div> </body> </html> |
画像書き出し（表示）用の要素は、divでもspanでもなんでもいいですが、必ずそのページ内でユニークなidをつけてください。同じidが複数あると、まともに動作しません。
このスクリプトで画像表示をする際には、まず「spinAnime」（固定）という名前の配列を作り、画像を表示させたい要素のidを引数に含めて「SpinAnime」クラスのインスタンスを生成し、それを、先のidを添え字とした配列「spinAnime」に格納します。うん、自分で書いてて何言ってんだかわかんなくなってきた。
要するに、画像を表示させたい要素のidを「setId」とすると、
インスタンス生成時の引数によって、画像の数や表示サイズ、ウェイト量等を指定します。
引数 = (id, folder, fileName, fileTail, fileFigure, width, height, cgNum, cutNum, wait, waitMax, waitMin, waitWidth, order, waitCtrl)
id：
設置要素のidを指定します。上のソースの、水色になっている部分を全部同じidにするようにしてください。
folder：
画像ファイルのあるフォルダ名を指定します。HTMLファイルと同じフォルダなら「./」、一つ上なら「../」などと、必ず最後は「/（スラッシュ）」で終わるように書いてください。
fileName：
画像ファイル名の、拡張子と連番の数字を除いた名前を指定します。「file001.png, file002.png, ...」というファイルであれば「file」と書きます。
fileTail：
画像ファイルの拡張子を指定します。通常は「jpg」「gif」「png」のどれかになります。
fileFigure：
画像ファイル名の連番の数字の桁数を指定します。「file001.png, file002.png, ...」というファイルであれば「3」、「file01.png, file02.png, ...」というファイルであれば「2」と書きます。
width：
画像を表示する横のサイズを指定します。実際の画像サイズより大きくても小さくても問題ありません。
height：
画像を表示する縦のサイズを指定します。実際の画像サイズより大きくても小さくても問題ありません。
cgNum：
画像ファイルの数を指定します。「file01.png, file02.png, ... file12.png」であれば「12」と書きます。
cutNum：
回転表示時に画像を刻む数を指定します。とりあえず、画像の横幅（サイズ）の半分、もしくは半分に近似した値が基本です。大きくすればするほど（最大で画像の横幅まで）回転が滑らかになり、小さくすればするほど（最低は1）回転は荒くなります。画像の横幅を割り切れる数にするのが無難です。
wait：
回転表示時のウェイト（初期値）を指定します。具体的には、次の表示までの待ち時間をmsec単位で指定します。画像の横幅や刻む数にもよりますが、25〜50程度にして、実際の表示を見ながら調整してみてください。
waitCtrl：
ウェイト制御部の表示、非表示を「on」、「off」で指定します。offにした場合、下記のウェイトの最大値、最低値、刻み幅は無視されます（ただしその場合でも、0など、何かテキトーな値は入れておいてください）。
waitMax：
ユーザがウェイトを変化させる場合の、ウェイトの最大値を指定します。初期値の二倍程度にして、実際の表示を見ながら調整してみてください。
waitMin：
ユーザがウェイトを変化させる場合の、ウェイトの最低値を指定します。5〜10程度にして、実際の表示を見ながら調整してみてください。
waitWidth：
ユーザがウェイトを変化させる場合の、ウェイトの刻み幅を指定します。あまり細かくても意味がないので、25とか50とか、大雑把な値にしてみて様子をみてください。
order：
画像の表示を連番順かランダムか、「inOrder」、「random」で指定します。ランダム表示の場合、続けて同じ画像は表示されないようになっています。