- ベストアンサー
divの背景画像を、徐々に表示させるには？
トップページに、２つのdivボックスを設置し、 それそれの背景画像をcssで、リピートさせるようにします。 さらに、それぞれのdivの背景画像が、 徐々に表示されるようにしたいのですが、 cssや、javascriptで可能でしょうか？ （最初は真っ白→だんだん背景画像） 可能でしたら、その方法を御教えいただけますでしょうか！ Flash使用は、考えておりません。 よろしくおねがいいたします。
- whoops101
- お礼率95% (139/146)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＜＜＜ var after = 10; // 秒数を指定 の方は、何秒後ということです。 変化のスペードは、 tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); のほうで、これは。80ミリ秒を意味しています。
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
永久に繰り返すということで考えてみました。 時間を短くすると問題が起きてくるかも知れませんが、秒数を指定してみてください。 実際には、長時間試してからご使用ください。 ------------------------------------------------------------ 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; }
お礼
なんどもありがとうございます！ ＞var after = 10; // 秒数を指定 で、数値をかえてみたのですが、表示スピードに変化がみえませんでした。（IE6） 他に方法あるのでしょうか。。。 あー、もう図々しくすみません。
- auty
- ベストアンサー率58% (284/486)
以下のコードを参考にしてみてください。 画像のファイル名と配置は、適当に変更してください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <style type="text/css"> <!-- div.img1, div.img2 { width: 50%; background-repeat: repeat; visibility: hidden; } div.img1 { float:left; background-image: url(1.jpg); } div.img2 { float:right; background-image: url(2.jpg); } --> </style> <body> <div id="limg" class="img1"> LEFT <br /><br /><br /> </div> <div id="rimg" class="img2"> RIGHT <br /><br /><br /> </div> </body> </html> ------------------------------------------------------------ fade.js ------------------------------------------------------------ window.onload = function () { 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; window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }
お礼
ありがとございます！ 出来ました！ これを、さらに何秒後に表示させる、というようなことまで指示することが出来るのでしょうか？ さらなる質問ですみません。
- HIRSYU
- ベストアンサー率51% (45/87)
http://youmos.com/reference/opacity_javascript.html ↑を参考に、対象のdivを透明状態から、徐々に非透明してはどうでしょう
お礼
ありがとうございます。 勉強不足のため、恥ずかしながらこの通りの動作さえることすら、うまくいきませんでした。 ご紹介いただいたページの 「実際のJavaScriptコード」を○○○.jsとして保存し、 htmlには、 <a href="#" id="sample_click">（サンプルを実行）</a><br /><script type="text/javascript" src="○○○.js"></script> を書いて、 cssに、 body { background:url(img.jpg) ; filter:alpha(opacity=50); // Internet Explorer 0～100 （整数） -moz-opacity: 0.5; // Firefox 0～1.0 （小数） opacity:0.5; // Safari 0～1.0 （小数） } では、動かなかったのですが、間違っているのはどこなのでしょうか。
お礼
なるほどです。 ありがとうございました！ とっても役立ちそうです。 ご丁寧に、ほんとうにありがとうございました。