15.Javaを使った、全然ぶれないパラパラ・アニメ画像です
ここでは[0]〜[9]まで、10枚の画像数ですが、貼り違えと数字のミスがなければ、100枚でも200枚でも画像が入ります。一つの;のミスでも動きませんから、細心の注意で貼り込みをしましょう。一つ一つの画像サイズが異なっていても、一番下の欄外にまとめてwidthとheightで指定するところがありますから楽です。このままコピーして貼り込みします。画像が100枚なら、[99]まで数字を揃えて順番に作ります。そして、src=" " の間に、アップロードした画像を入れます。500の数字を大きくすると遅く、小さくすると早くパラパラが動きます。これも、Javaを受け付けない処では、使えません。だから、本家サイトでは、ダブル・マーキーにしてあります。注;中に入っている日本語は触らないでください。ともかくこのままの状態でコピーすることが優先です。要らないからと思って消したら、動かなくなりました。
事例を見る 事例は、額縁、煌めく星、浮遊が付いています。下のJavaは中の絵だけです。全部を欲しい人は、事例画面からソースの表示をしてください。
<SCRIPT Language="JavaScript"> <!-- function paraAnimSetting1(){ this.paracount = 0; this.paraimg= new Array(); this.defsec = 500; //次の画像へ切り替わるまでの時間。1/1000秒単位。現在は0.5秒。 this.loop = true; //アニメーションがループするかどうか。true/false。trueの場合ループする。 /* 画像の設定 (上から順に表示される)*/ this.paraimg[0] = new Image(); this.paraimg[0].src = "natori-1.jpg"; this.paraimg[1] = new Image(); this.paraimg[1].src = "natori-y.jpg"; this.paraimg[2] = new Image(); this.paraimg[2].src = "natori-p.jpg"; this.paraimg[3] = new Image(); this.paraimg[3].src = "natori-g.jpg"; this.paraimg[4] = new Image(); this.paraimg[4].src = "natori-b.jpg"; this.paraimg[5] = new Image(); this.paraimg[5].src = "natori-1.jpg"; this.paraimg[6] = new Image(); this.paraimg[6].src = "natori-y.jpg"; this.paraimg[7] = new Image(); this.paraimg[7].src = "natori-p.jpg"; this.paraimg[8] = new Image(); this.paraimg[8].src = "natori-g.jpg"; this.paraimg[9] = new Image(); this.paraimg[9].src = "natori-b.jpg";
/*以下、 this.paraimg[6] = new Image(); this.paraimg[6].src = "../_image/card/6.png"; と続ける事が出来る。 */ }
function paraAnim(imgname, el) { obj = eval(el); if(document.images) { document.images[imgname].src = obj.paraimg[obj.paracount].src; obj.paracount++; if(obj.paracount >= obj.paraimg.length) { if(obj.loop) { obj.paracount = 0; } else { return; } } setTimeout("paraAnim('"+imgname+"', '"+el+"')", obj.defsec); } }
if(document.images) { anim1 = new paraAnimSetting1(); } //--> </SCRIPT>
</HEAD>
<BODY onLoad="paraAnim('img1', 'anim1')">
<!-- アニメーション画像のタグ --> <img src="img10171020925.jpg" width=250 height=300 name="img1">
</BODY> </HTML>
|