• 締切済み

Javaスクリプトで画像をフェードインさせるには

以下のサンプルロジックはある画像数分を次々に表示させるJavaスクリプトです。 下記のロジックはフェードアウトの機能のみしかありません。フェードインさせてきれいに表示させたいのですがどうやってコーディングするのかわかりません。 よろしくお願いします。 function Show() { //次の画像へ if (nTransRate < nTransMin) { nImageCount++; //表示 document.getElementById("imgWave").src = arrImageUrl[nImageCount]; if (nImageCount >= arrImageUrl.length - 1) nImageCount = -1; nTransRate = 80; nLoop = 0; } var strStyle = "alpha(opacity=" + nTransRate + ")"; if (document.getElementById) { document.getElementById("imgWave").style.filter = strStyle; } nTransRate = nTransMax-nLoop; //リピート tid=setTimeout("Show()", nTimerInterval); nLoop++; }

  • fm0606
  • お礼率13% (100/761)
  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

opacityは、 0で透明（画像が見えなくなる） 100で不透明（はっきり見える） なので、フェードアウトをコントロールしている nTransRateを０から１００まで変化させてやればいいです。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 画像のフェードインについて

    最近javascriptでいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、 そのソースの意味を調べていましたら、今まで見たことのない 表記が出てきました。再起処理の中に"+img+"とうのがありますが これはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくの かなと想像してしまいますが、果たしてその解釈も正しいものやら 想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、 数日前に本を読み始めたばかりの初心者です。バカな質問と思わ れるかもしれませんが宜しくお願いいたします。 <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔（ミリ秒単位） ntc = 2; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd); } // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } //-->

  • javascriptでのフェードイン

    javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 （Photologのサムネイル表示での使用を想定しております。） ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} //////////////////////// ///html file/// <html> <head> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。

  • 続き]　divの背景画像を、徐々に表示させるには？

    トップページの２つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました！ （http://oshiete1.goo.ne.jp/qa3921804.html） リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか？ ------------------------------------------------------------ fade.js ------------------------------------------------------------ var after = 10; // 秒数を指定 var tid1; var tid2; window.onload = function () { fdi2(); tid2=window.setInterval("fdi2()", after*1000); }; function fdi2() { var img1 = document.getElementById("limg"); img1.style.visibility = "visible"; fadeIn("limg", 0); var img2 = document.getElementById("rimg"); img2.style.visibility = "visible"; fadeIn("rimg", 0); } function fadeIn(imgId, opacity) { if (opacity <= 100) { setOpacity(document.getElementById(imgId), opacity); opacity += 10; tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } else { window.clearTimeout(tid1); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.KHTMLOpacity = opacity / 100; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }

  • Firefoxとクロームでフェードインにならない

    横並びの画像を3枚時間差でフェードイン（左から順に表示）させたいのですが、 ＩＥでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。 FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら ご教授いただけますでしょうか。宜しくお願いいたします！ <script type="text/JavaScript"> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ（ミリ秒単位） var myx = 10; // 何%ずつ変化させるか var mypic = new Array("px1","px2","px3"); // 画像のname（順番に並べる） var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } </script> 【ＨＴＭＬ】 <ul> <li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li> <li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> <li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> </ul>

  • javascriptでのフェードイン

    javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////

  • 画像をフェードインさせるタグについて

    HP作成の際、 画像をフェードインさせたいのですが、 以下のタグをコピーして貼り付けても エラーになります。 どこを修正したらよいのでしょうか？ よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- spd = 50; ntc = 2; fii = new Array("ia","ib","ic"); cnt = 0; i = 0; function fdInImg() { document.images[fii[i]].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) { cnt = 0; i++; } if(fii.length <= i) return; setTimeout("fdInImg()",spd); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>

  • 画像のスムーズなフェードイン方法

    このスクリプトではなんか動きがぎこちないのですが、スムーズに変化させるには、どう変更すればいいのでしょうか？ <SCRIPT language="JavaScript"> var roopcount = 0; function myfadein(i){ if ( roopcount >= 0){ fade.filters(0).Opacity = 10*roopcount; fade.filters(0).FinishOpacity = 10*roopcount; roopcount++; setTimeout("myfadein(roopcount)",200);} } </SCRIPT> </head> <body bgcolor="#000000" onload="myfadein()"> <CENTER> <IMG id=fade style="filter:Alpha(Opacity=0,FinishOpacity=0, style=2,StartX=0,StartY=0,FinishX=420,FinishY=350)" src="014-2.gif" border=0"> </CENTER> </body> 宜しくお願いしますm(_ _)m

    • ベストアンサー
    • CSS
  • 画像の下のテキストにフェードアウト後入力したい

    フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔（ミリ秒単位） ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------

  • ページのフェードアウトインについて

    フェードインアウトの勉強をしているのですが、画像をクリックしてページをフェードアウトインさせる場合、<body>にはどのように書けばいいのでしょう？ <head> <!-- //fadeoutin var fade_outincount = 100; var fade_outincount_str = 100; var fade_clear2; var fade_outinspeed = 3; var fade_outintimer = 100; var wait_timer2 = 1000; //fadeout function fade_outin(){ clearTimeout(fade_clear2); if(document.all || document.getElementById){ if ( fade_outincount_str > 0){ fade_outincount_str = fade_outincount; if(document.all){ if(fadeoutin.filters["alpha"]){ fadeoutin.filters["alpha"].Opacity = fade_outincount_str; } } else if(document.getElementById){ document.getElementById('fadeoutin').style.MozOpacity = fade_outincount_str/100; } fade_outincount = fade_outincount - fade_outinspeed; fade_clear2 = setTimeout("fade_outin()",fade_outintimer); }else{ fade_clear2 = setTimeout("fade_outin2()",wait_timer2); } } } //fadein function fade_outin2(){ if ( fade_outincount_str < 100){ fade_outincount_str = fade_outincount; if(document.all){ if(fadeoutin.filters["alpha"]){ fadeoutin.filters["alpha"].Opacity = fade_outincount_str; } } else if(document.getElementById){ document.getElementById('fadeoutin').style.MozOpacity = fade_outincount_str/100; } fade_outincount = fade_outincount + fade_outinspeed; fade_clear2 = setTimeout("fade_outin2()",fade_outintimer); }else{ fade_clear2 = setTimeout("fade_outin()",wait_timer2); } } //--> </SCRIPT> </head> 宜しくお願いします

    • ベストアンサー
    • CSS
  • 二つのフィルタを同時に使用したい

    よろしくお願いいたします。 フェードインと光源のフィルタを同時に使用したいと希望しております。 現在、ページを開くと、画像がフェードインするようになっています。 n = 0; function fadein() { if (n > 100) return; n += 10; IMG1.filters['alpha'].opacity = n; setTimeout("fadein()",200); } ～ <BODY onload="fadein();"> （ちなみに実際には、この画像はページを開くたびに変わります。） document.write("～ id='IMG1' name='name1' style='filter:alpha(opacity=0);'>"); さらにこれに、例えば以下のような光源フィルタを追加したいと希望し試行錯誤しておりましたがどうしてもうまくいきません。 name1.filters.light.addAmbient(255, 255, 255, 50) name1.filters.light.addcone(1, 1, 1, 150,150,255,255,255,100,50) 恐れ入りますが何卒ご教授いただきたくお願いいたします。 申し訳ございませんが、具体的にどのように書けばよいかソースを添付いただけると大変ありがたいです。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する