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

解決済

質問者：whoops101
質問日時：2008/04/04 16:46
回答数：4件

トップページに、２つのdivボックスを設置し、
それそれの背景画像をcssで、リピートさせるようにします。

さらに、それぞれのdivの背景画像が、
徐々に表示されるようにしたいのですが、
cssや、javascriptで可能でしょうか？
（最初は真っ白→だんだん背景画像）

可能でしたら、その方法を御教えいただけますでしょうか！

Flash使用は、考えておりません。
よろしくおねがいいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： auty
回答日時：2008/04/06 22:51

＜＜＜　var after = 10; // 秒数を指定

の方は、何秒後ということです。

変化のスペードは、
tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80);
のほうで、これは。80ミリ秒を意味しています。

- 0
- 件

通報する

この回答へのお礼

なるほどです。
ありがとうございました！

とっても役立ちそうです。

ご丁寧に、ほんとうにありがとうございました。

通報する

お礼日時：2008/04/07 09:43

No.3

回答者： auty
回答日時：2008/04/04 20:30

永久に繰り返すということで考えてみました。

時間を短くすると問題が起きてくるかも知れませんが、秒数を指定してみてください。
実際には、長時間試してからご使用ください。

------------------------------------------------------------
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;
}

- 0
- 件

通報する

この回答へのお礼

なんどもありがとうございます！

＞var after = 10; // 秒数を指定

で、数値をかえてみたのですが、表示スピードに変化がみえませんでした。（IE6）
他に方法あるのでしょうか。。。
あー、もう図々しくすみません。

通報する

お礼日時：2008/04/06 17:29

No.2

回答者： auty
回答日時：2008/04/04 18:52

以下のコードを参考にしてみてください。

画像のファイル名と配置は、適当に変更してください。

------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="fade.js"></script>
</head>
<style type="text/css">

</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;
}

- 0
- 件

通報する

この回答へのお礼

ありがとございます！
出来ました！

これを、さらに何秒後に表示させる、というようなことまで指示することが出来るのでしょうか？
さらなる質問ですみません。

通報する

お礼日時：2008/04/04 19:26

No.1

回答者： HIRSYU
回答日時：2008/04/04 17:18

http://youmos.com/reference/opacity_javascript.h …
↑を参考に、対象のdivを透明状態から、徐々に非透明してはどうでしょう

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
勉強不足のため、恥ずかしながらこの通りの動作さえることすら、うまくいきませんでした。

ご紹介いただいたページの

「実際の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 （小数）
}

では、動かなかったのですが、間違っているのはどこなのでしょうか。