- ベストアンサー
時間差で画像を動作させたいjavascriput
- (1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。速度調整可能か。
- (2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める。速度調整可能か。同時にmogemoge028○.jpgをフェードインさせる。
- setTimeOutの使い方や速度を改善する方法を教えてください。
- ぽぽ ぽん！（@osa0415）
- お礼率43% (7/16)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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"> <!-- setOp(document.getElementById("Layer1"),0); setOp(document.getElementById("Layer3"),0); animator("Layer1", 2, 50, 0, 100, setOp, scenario1); function scenario1() { animator("Layer1", -2, 50, 100, 0, setOp, scenario2); } function scenario2() { animator("Layer2", 2, 40, 150, 280, moveV); animator("Layer3", 1, 80, 0, 100, setOp); } // **** アニメーション **** // id:対象要素のid // step, interval:移動量(speed), 繰返し間隔(msec) // start, end:スタート/エンド ポジション // func:アニメーション内容 // callback:コールバック関数 function animator(id, step, interval, start, end, func, callback) { var pos = start, elm = document.getElementById(id); (function() { pos += step; var flag = (step>0 && pos>=end) || (step<0 && pos<=end) pos = flag?end:pos; func(elm, pos); if (!flag) setTimeout(arguments.callee, interval); else if(callback) callback(); })(); } function moveV(e, p) { e.style.top = p + "px"; } function setOp(e, o) { e.style./*@cc_on @if(1) filter = "alpha(opacity=" + o + ")" @else*/ opacity = o/100/*@end@*/; } //--> </script> </body> </html>
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
続き function next(){ if(!layer1.done){ layer1.fadeOut(); (function (elm,frompos,topos,step,int){ var movetimer = setInterval(function(){ frompos += step; if(frompos > topos) clearInterval(movetimer); elm.style.top = frompos + "px"; },int) })(document.getElementById('Layer2'),153,203,2,30); } if(layer1.done && !layer3.done){ layer3.fadeIn(); } } var layer1 = Fader.init(document.getElementById('Layer1'),5,30,0); var layer3 = Fader.init(document.getElementById('Layer3'),5,30,0); layer1.fadeIn(); </script> IEの element.style.filter = 'Alpha(opacity=ｘｘ)'; 対処さぼったし、 たぶん採用されないだろうから、使い方の説明もしない。
お礼
こちらも是非参考にさせていただきます＾＾
- yyr446
- ベストアンサー率65% (870/1330)
もうすっきりした回答がでちゃったけど、しかも盗作っぽいけど、 その上、長いけど、 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; })(); 続く
補足
そんなことないです！勉強兼ねてなんで何でもうれしいです＾＾ありがとうございます＾＾
- LOHA
- ベストアンサー率52% (203/388)
上記のソースではフェードアウトなどはしないと思いますが。 ＞setTimeOutのいい使い方や と書いてありますが、setTimeOutどこにも使われてないところ見ると、コピペミスでしょうか？ さて本題ですが、どうしても全てを自作したい、というわけでないのでしたらライブラリを使いませんかね。 オススメはjQueryです。 http://jquery.com/ effect系(http://semooh.jp/jquery/api/effects/)のメソッドを使えば、表示非表示はshow、hideでもそれっぽくなりますし、移動はanimateで可能ですし。 またeasingプラグイン（http://semooh.jp/jquery/cont/doc/easing/）でアニメーションの速度を変えたりもできます。
補足
早速のご回答ありがとうございます。 作成した内容に私がsetTimeOutを使うと動作しなくなるので、動作する内容を載せました。 その上でのアドバイスが欲しかったのです。 jQueryは知らなかったです！参考にさせていただきます！
補足
ありがとうございます；；なまら勉強になりました。 私が今まで疑問で分からなかったことが一気に2個も解消されました＾＾ ちなみに1つわからないのが#Layer2 { top:153px; left:198px; }のtopとleftをいじってしまうと上下の動作が固定位置に戻ってからの移動になってしまうんですが。これはどこが原因でなってるんでしょうか？＞＜