時間差で画像を動作させたいjavascriput

解決済

質問者：osa0415
質問日時：2010/11/23 14:57
回答数：4件

時間差で画像にあれこれさせる！javascriput

(1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。（できれば速度調整できるとうれしいです）
↓
(2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める（できれば速度調整できるとうれしいです）。
これと同時にmogemoge028○.jpgをフェードインさせる。

自分では以下まで作成しましたが。setTimeOutのいい使い方や
もっと早く動作するのあるだろ！
等、良案をよろしくお願い致します。
あまり時間が作れなく、基礎等も毎日勉強しているのですがおっつきせん＾＾；
もちろん教えて下さったのを元に勉強させていただきたいと思っております。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV style="top : 100px;left : 106px;

position : absolute;
z-index : 2;
" id="Layer1"><IMG src="wakuwaku.gif" width="1050" height="610" border="0"></DIV> 　//画像１つ目

<DIV style="top : 153px;left : 198px;
position : absolute;
z-index : 3;
" id="Layer2"><IMG src="ｕｋｉｕｋｉ.gif" width="445" height="495" border="0"></DIV> 　//画像２つ目

<DIV style="top : 170px;left : 200px;
position : absolute;
z-index : 1;
" id="Layer3"> <script language="JavaScript" type="text/javascript"> 
</script>
</DIV>//画像３つ目（ランダム表示）

</BODY>
</HTML>

通報する

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

質問の本文を隠す

回答 (4件)

No.4

回答者： yyr446
回答日時：2010/11/24 15:54

続き

- 0
- 件

通報する

この回答へのお礼

こちらも是非参考にさせていただきます＾＾

通報する

お礼日時：2010/11/25 12:40

No.3

回答者： yyr446
回答日時：2010/11/24 15:51

もうすっきりした回答がでちゃったけど、しかも盗作っぽいけど、

その上、長いけど、

HTMLはそのままで、</body>の前に
<script type="text/javascript">
(function () {
　 function Fade (node,step,interval,opacity) {
　　　this.node = node;
　　　this.step = step;
　　　this.interval = interval;
　　　this.opacity = opacity;
　　　this.timerId = null;
　　　this.mode = step < 0 ? -1: 1;
　　　this.done = false;
　 }
　 var
　 setOpacity = function (alpha) {
　　　this.opacity = alpha / 100;
　 },
　 stop = function () {
　　　this.timerId && clearInterval (this.timerId);
　　　this.timerId = null;
　　　return this;
　 },
　 start = function (func) {
　　　var that = this;
　　　this.timerId = setInterval(function(){
　　　 func.call(that);
　　　},this.interval);
　 },
　 fluctuation = function () {
　　　var alpha = this.opacity + this.step * this.mode;
　　　if (alpha < 0) {
　　　　alpha = 0;
　　　　stop.call (this);
　　　　this.done = true;
　　　　next();
　　　} else if (100 < alpha) {
　　　　alpha = 100;
　　　　stop.call(this);
　　　　next();
　　　}
　　　this.opacity = alpha;
　　　setOpacity.call(this.node.style,alpha);
　 },
　 In = function () {
　　　this.mode = 1;
　　　this.timerId || start.call(this,fluctuation);
　　　return this;
　 },
　 Out = function () {
　　　this.mode = -1;
　　　this.timerId || start.call(this,fluctuation);
　　　return this;
　 },
　 init = function (node,step,interval,opacity){
　　　if (!arguments.length) return null;
　　　var obj = new Fade (
　　　　node,
　　　　step || 5,
　　　　interval || 30,
　　　　opacity || 0
　　　 );
　　　setOpacity.call (node.style,opacity);
　　　return obj;
　 };
　 Fade.prototype.fadeIn = In;
　 Fade.prototype.fadeOut = Out;
　 Fade.init = init;
　 this.Fader = Fade;
})();

続く

この回答への補足

そんなことないです！勉強兼ねてなんで何でもうれしいです＾＾ありがとうございます＾＾

補足日時：2010/11/25 12:39

通報する

- 0
- 件

通報する

No.2ベストアンサー

回答者： fujillin
回答日時：2010/11/24 12:52

setTimeoutとアニメーションの理解のための参考として…

雰囲気のみですが、速度の調節はstep、intervalの値を変えることで可能です。
startはCSSから取得する方が便利かもしれませんが、手抜きして直接指定するようにしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#Layer1, #Layer2, #Layer3 { position:absolute; }
#Layer1 { top:100px; left:106px; }
#Layer2 { top:153px; left:198px; }
#Layer3 { top:170px; left:200px; }
img { border:0 }
#Layer1 img { width:1050px; height:610px; }
#Layer2 img { width:445px; height:495px; }
#Layer3 img { width:445px; height:100px; }
</style>
</head>

<body>

<div id="Layer1">
<img src="wakuwaku.gif" alt="wakuwaku">
</div>


<div id="Layer2">
<img src="ukiuki.gif" alt="ukiuki">
</div>


<div id="Layer3">
<img src="test.jpg" alt="randomn">
</div>

<script type="text/javascript">

</script>
</body>
</html>

この回答への補足

ありがとうございます；；なまら勉強になりました。
私が今まで疑問で分からなかったことが一気に2個も解消されました＾＾

ちなみに1つわからないのが#Layer2 { top:153px; left:198px; }のtopとleftをいじってしまうと上下の動作が固定位置に戻ってからの移動になってしまうんですが。これはどこが原因でなってるんでしょうか？＞＜

補足日時：2010/11/25 12:38

通報する

- 0
- 件

通報する

No.1

回答者： LOHA
回答日時：2010/11/23 20:53

上記のソースではフェードアウトなどはしないと思いますが。

＞setTimeOutのいい使い方や
と書いてありますが、setTimeOutどこにも使われてないところ見ると、コピペミスでしょうか？

さて本題ですが、どうしても全てを自作したい、というわけでないのでしたらライブラリを使いませんかね。
オススメはjQueryです。

http://jquery.com/

effect系(http://semooh.jp/jquery/api/effects/)のメソッドを使えば、表示非表示はshow、hideでもそれっぽくなりますし、移動はanimateで可能ですし。
またeasingプラグイン（http://semooh.jp/jquery/cont/doc/easing/）でアニメーションの速度を変えたりもできます。