ページのフェードアウトインについて
- 画像をクリックしてページをフェードアウトインさせる方法について説明します。
- fade_outinというスクリプトを使用することで、ページのフェードアウトインを実現できます。
- 具体的な実装方法をコードとして示しています。
- ベストアンサー
ページのフェードアウトインについて
フェードインアウトの勉強をしているのですが、画像をクリックしてページをフェードアウトインさせる場合、<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> 宜しくお願いします
- hikaru2002
- お礼率43% (43/98)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか。 <script language="JavaScript"> <!-- n = 0; function fadein() { if (n > 100) return; n += 10; myIMG.filters['alpha'].opacity = n; setTimeout("fadein()",200); } function fadeout() { if (n < 0) return; n -= 10; myIMG.filters['alpha'].opacity = n; setTimeout("fadeout()",200); } // --></script> </head> <body LANGUAGE=javascript onload="return fadein()"> <P> <IMG id=myIMG style="FILTER: alpha(opacity=0); LEFT: 0px; POSITION: absolute; TOP: 0px" src="img1.gif" LANGUAGE=javascript onclick="return fadeout()"> </body> </HTML>
関連するQ&A
- javascriptでループをやめたい
javascript初心者です。 下記の様にソースが書いてあります。 画像が表示され、順番に表示されるのはいいのですが、 最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、 表示されてしまいます。最後の画像になった時に、表示を止め、 最後の画像のまま表示を止めたいのですが、わかりません。 ご教示お願いいたします。 <SCRIPT language="JavaScript"> <!-- FITime=1; FOTime=8; n=10; flg=1; num=0; cnt=7; Fna="./img"; Fexp="jpg"; // 以下スクリプト本体 function fade(img){ if(flg==1){ document.images[img].src=Fna+num%cnt+"."+Fexp; if(n<=0) flg=0; document.images[img].filters['alpha'].opacity=n; if(n>=99)speed=0.05;else speed=5; n-=speed; setTimeout("fade('"+img+"')",FOTime); } else{ document.images[img].src=Fna+(num+1)%cnt+"."+Fexp; document.images[img].filters['alpha'].opacity=n; if(n>=98)speed=0.05;else speed=2; n+=speed; if(n>=100) {flg=1;++num;if(num%cnt==0){num=0;}} setTimeout("fade('"+img+"')",FITime); } } //--> </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">
- ベストアンサー
- JavaScript
- 画像のスムーズなフェードイン方法
このスクリプトではなんか動きがぎこちないのですが、スムーズに変化させるには、どう変更すればいいのでしょうか？ <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
- 続き] 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; }
- ベストアンサー
- JavaScript
- JavaScriptでスライドショーを2箇所
お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、 フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。 外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。 後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、 色々試してみても上手くいきません。 ご教授をお願いいたします。
- ベストアンサー
- JavaScript
- 関数化のやり方
function bold(){ if(document.all){ //IE var str=document.selection.createRange().text; if (str != "") { document.selection.createRange().text="<b>" + str + "</b>"; } else { document.form1.CBBE_TEXT.value += "<b></b>" } } else { //Firefox var el=document.getElementById('text'); var sPos = el.selectionStart; var ePos = el.selectionEnd; var str = el.value.substring(sPos, ePos); el.value = el.value.substring(0, sPos) + "<b>" + str + "</b>" + el.value.substr(ePos); } } function italic(){ if(document.all){ //IE var str=document.selection.createRange().text; if (str != "") { document.selection.createRange().text="<i>" + str + "</i>"; } else { document.form1.CBBE_TEXT.value += "<i></i>" } } else { //Firefox var el=document.getElementById('text'); var sPos = el.selectionStart; var ePos = el.selectionEnd; var str = el.value.substring(sPos, ePos); el.value = el.value.substring(0, sPos) + "<i>" + str + "</i>" + el.value.substr(ePos); } } を <input type="button" value="太字" onclick="bold()"> <input type="button" value="斜字" onclick="italic()"> で制御しています。 関数化できませんか？
- ベストアンサー
- JavaScript
- setTimeout関数の使用方法について
はじめまして。 質問があります。 以下のコードを実行すると、一定時間おきに文字の表示が変化する ように動いてくれません。何が問題なのかがまったく見当がつき ません。どなたかご指摘をお願いします。 ---------------------------------------------------------------- <html> <head> <title>setTimeout()関数の使用例</title> </head> <body onLoad="timer=setTimeout('changeChar()',500)"> <script type="text/javascript"> <!-- var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var cnt = 0; function changeChar() { clearTimeout(timer); ch = str.charAt(cnt++); document.write(ch); if(str.length > cnt) { timer = setTimeout("changeChar()",500); } } //--> </script> </body> </html> ----------------------------------------------------------------
- ベストアンサー
- JavaScript
- 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++; }
- 締切済み
- HTML
- オブジェクト指向のsetTimeoutの呼び出し方法
オブジェクト指向を勉強中です しかし今一しっくりきません。 setTimeoutの呼び出し部分の記述は、これでいいのでしょうか？ やりたいことは、沢山の画像を一度に違ったタイミングでフェードアウト・インをすることです。 <html> <body> <img src="./img/1.gif" width="50" height="50" id="a"> <img src="./img/2.gif" width="50" height="50" id="b"> <input type="button" value="pp" onClick="img2.fin(10,50)"> <script> var img1 = new ImageEffect( 'a',100 ); img1.fout(10,30); var img2 = new ImageEffect( 'b',100 ); img2.fout(5,30); function ImageEffect( id,val1 ){ var func=[]; this.obj = document.getElementById( id ); this.opacity=(val1==undefined)? 100:val1; this.opacitySet = function(n){ this.obj.style.filter='alpha(opacity='+n+')'; this.obj.style.MozOpacity=n/100; this.obj.style.opacity=n/100; this.opacity = n; } this.fout = function(step,wtime){ func[id] = this; this.opacity-=step; if(this.opacity<1) this.opacity = 0; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fout( step, wtime);}, wtime);//ここの呼び出し } this.fin = function(step,wtime){ func[id] = this; this.opacity+=step; if(this.opacity>100) this.opacity = 100; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);//ここの呼び出し } }
- ベストアンサー
- JavaScript
- 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> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 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> ////////////////////////
- ベストアンサー
- JavaScript
お礼
うわっ！こんなシンプルに出来るんですね♪ 幾つか分からない言葉があるので、早速調べなきゃ。 有難うございました(#^.^#)