JavaScriptアニメーションの書き方と使い方
- JavaScriptを使ったアニメーションのコマ送りを実現する方法を説明します。
- EmEditorとInternet Explorerを使用してHTML文書を作成し、画像のアニメーションを表示します。
- コード内で画像を順番に表示するためのJavaScriptの書き方や設定方法を解説します。
- ベストアンサー
JavaScriptアニメーションについて質問！！
学校の授業の入門編でやったことです だから初心者です 使用ソフトはEmEditot, Internet Explorerです。 ペイントを使い 01.gifから順番に06まで絵をかきました そしてz:\local\100のフォルダに保存 z:\local\100 フォルダ内で 右クリック → [新規作成] → [テキストドキュメント] ファイル名を 100.html とする(注意が表示されるが実行する) 100.html を EmEditorで開く (アイコン上で 右クリック→[送る]→[EmEditor]) 以下のHTML文書を入力する（HTML文書をドラッグしてEmEditorに貼り付けてよい） xx, yy は作成した画像の幅と高さ, nnは画像枚数である それぞれを置き換えること gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = nn; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="xx" height="yy" /> </body> </html> という説明文があり <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = 06; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="128" height="128" /> </body> </html> まで書いたのですが 1枚しかネット上には表示されず アニメーションになりませんでした。 どうすれば コマ送りみたいなアニメーションになりますか 書き方を教えてください
- lewgdp
- お礼率95% (44/46)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptですので、ローカルでも動きます。 このhtmlと、01.gif～06.gif を同ディレクトリに置き、HTMLを表示してアニメーションしますか。 そして、サーバー上にも、全ファイルを転送し、HTMLを表示してアニメーションしますか。 こちらでは、あなたの書かれたソースそのままで、動きました。 単純に画像ファイルが転送されてないだけのような気がします…。
関連するQ&A
- 携帯でGIFアニメーションが正しく表示されません
携帯でGIFアニメーションを実現したいのですが、パソコンのブラウザで確認した場合問題なく動作するのですが、携帯のブラウザで確認した場合にGIFのイメージが「logo1.gif」から次のイメージに再表示されません。 携帯のキャリアはドコモで試しています。 以下にプログラムを貼り付けます。 間違っている点がありましたらご教授願います。 ---------------------------- ソース ---------------------------- <html> <head> <title>アニメーション/JavaScript</title> <script type="text/javascript"> <!-- var image1=new Image(); image1.src="image/logo1.gif"; var image2=new Image(); image2.src="image/logo2.gif"; var image3=new Image(); image3.src="image/logo3.gif"; var timerID; function change() { clearTimeout(timerID); if(document.anime.src==image1.src) document.anime.src=image2.src; else if(document.anime.src==image2.src) document.anime.src=image3.src; else document.anime.src=image1.src; timerID=setTimeout("change()",500); } //--> </script> </head> <body onLoad="timerID=setTimeout('change()',500)"> <img src="image/logo1.gif" name="anime" width="50" height="50" alt="アニメ"> </body> </html> ---------------------------- ソース ----------------------------
- 締切済み
- JavaScript
- javascriptでの画像の先読みについて（その２）
その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- ベストアンサー
- JavaScript
- 重い処理中のアニメーションgifについて
お世話になります。 javascript で重い処理中のプログレス(アニメーションgif)表示について教えてください。 やりたいことは以下です。 ==================================== 1.重い処理の前にプログレス(アニメーションgif)表示 2.重い処理開始 3.プログレス(アニメーションgif)非表示 [sample.html] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#btn').click(function() { progressStart(); // プログレス(アニメーションgif)表示 func1(); // 重い処理開始 progressEnd(); // プログレス(アニメーションgif)非表示 }); }); /** * プログレス(アニメーションgif)表示 */ function progressStart() { $('#prog').show(); } /** * プログレス(アニメーションgif)非表示 */ function progressEnd() { $('#prog').hide(); } /** * 重い処理(とりあえず5秒) */ function func1() { var T = 5; //T秒待つ var d1 = new Date().getTime(); var d2 = new Date().getTime(); while( d2 < d1+1000*T ){ d2=new Date().getTime(); } return; } </script> </head> <body> <form> <input type="button" id="btn" value="開始" /> <div id="result"></div> <img id="prog" src="img/loadinfo.gif" alt="" style="display:none;" /> </form> </body> </html> ==================================== 上記コードで試したのですが、 重い処理中はプログレス(アニメーションgif)が動かず固まったままです。。。 重い処理中もプログレス(アニメーションgif)を 動いたままにすることは可能なのでしょうか？ どなたかご教授いただければと思います。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptに関する簡単な質問です。
<script> var image1=new Image(); image1.src = "image/ny.jpg"; var image2=new Image(); image2.src = "image/tokyo.jpg"; var i = 1; function change(){ if(i==1){ element.src=image2.src; i=2; }else{ element.src=image1.src; i=1; } } </script> <img id="photo" src="image/ny.jpg" /> <script> var element = document.getElementByid("photo"); element.onclick=change; </scropt> オンクリックで画像が切り替わるというスクリプトなのですが、 new Image() というのは new date() と言うのと関係しているのでしょうか。 var i=1 と言うあたりからよくわからなくなってしまいます。 最後のelement.onclick=change;と言うのもよくわかりません。 スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。 よろしくお願いします。
- 締切済み
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptについて
javascriptに関してまだまだ初心者で困っております． 作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです． そこで以下のようなプログラムを作成したのですが，うまく動きません． ご助言頂ければ幸いです． <html> <head> <script type="text/javascript> <!-- function changeImg(no){ for (i=1; i<3; i++){ document.image[i].src = "off.gif"; if(i==no) document.image[i].src = "on.gif"; } } //--> </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptのスライドショー IE以外のブラウザで再生できない
JavaScriptのサンプルソースを提供されている方のサイトから コピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか？ <script> <!-- var img = "1.jpg,2.jpg,3.jpg"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 4000); //--> </script>
- ベストアンサー
- JavaScript
- javascriptのスライドショーで、ポイント時に代替テキストを表示するか、ポイントしなくてもキャプションを表示するためには？
初心者ですが何とかjavascriptで自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか？ スタイルシートは使っていません。 現在はこんな感じです。 根本的に違うのでしょうか？できれば簡単な方法があればと思います。 head部には <SCRIPT> <!-- var img = "1.JPG,2.JPG,3.JPG"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </SCRIPT> 対象部分には <SCRIPT> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 3000); //--> </SCRIPT>
- 締切済み
- その他(ソフトウェア)
- なぜ「ページでエラーが発生しました。」？
字数が限られているので、「なぜエラーなのですか？」 -----ここからhead区間 <!--JavaScript Function window.onerror = null; var ver4 = (navigator.appVersion.charAt(0) >= "4"); var NN4 = ver4 && (navigator.appName.charAt(0) == "N"); var IE4 = ver4 && (navigator.appName.charAt(0) == "M"); var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName.charAt(0) == "N")); if(NN3 || NN4 || IE4){ var img_b = new Array(); img_b[0] = new Image(); img_b[0].src = "kbw.jpg" img_b[1] = new Image(); img_b[1].src = "ao.jpg" img_b[2] = new Image(); img_b[2].src = "bcw.jpg" img_b[3] = new Image(); img_b[3].src = "sm.gif" } function B_in(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; } function B_out(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; return false; } // END ---> </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript"> <!--- ここから表示 document.write(TodayIMG(0)); //end ---> </SCRIPT>
- ベストアンサー
- JavaScript
- ｈｔｍｌでjavascriptソースをテーブル内に表示するには？
始めまして宜しくお願いします。 スクリプトソースをテーブルタグの中のテーブルに貼り付けたのですが 表示されません、<HEAD>～</HEAD>に貼り付けると表示されますれ <BODY>～</BODY>は表示されません。希望としてはテーブルタグの中に 貼り付け表示したいのですが、いろいろ調べ試しましたが 上手くいきません、どなたか助けていただければと思います、 よろしくお願いします。 ソースはコレになります↓。 <script language="JavaScript"> <var imglist = new Array( "flowerA.jpg", "flowerB.jpg", "flowerC.gif", "flowerD.gif" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output);> </script>
- 締切済み
- JavaScript
お礼
ありがとうございます。私だけできなかったので そうなのかもしれません もう一度やってみようと思います。 本当に ありがとうございました。