時間差で画像を動作させたいjavascriput
- (1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。速度調整可能か。
- (2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める。速度調整可能か。同時にmogemoge028○.jpgをフェードインさせる。
- setTimeOutの使い方や速度を改善する方法を教えてください。
- ベストアンサー
時間差で画像を動作させたいjavascriput
時間差で画像にあれこれさせる！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"> <!-- var randimg = new Array(); var randimg_count = 0; randimg[randimg_count++] = "mogemoge0287.jpg" randimg[randimg_count++] = "mogemoge0288.jpg" randimg[randimg_count++] = "mogemoge0289.jpg" randimg[randimg_count++] = "mogemoge0280.jpg" document.write("<img src=\"" +randimg[Math.floor(Math.random() * randimg.length)]+ "\">"); //--> </script> </DIV>//画像３つ目（ランダム表示） </BODY> </HTML>
- ぽぽ ぽん！（@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は知らなかったです！参考にさせていただきます！
関連するQ&A
- 画像の四隅を丸くしたい
html初心者です。 あるメイン画像の左上に、透過gif画像を重ねて表示させたいのですが、そのようなことは可能なんでしょうか・・・ メイン画像は長方形です（通常の画像のように、ふちは角ばっている）。その画像の左上に、透過gif画像を重ねて表示させようとしています。 htmlには： <TABLE> <TR> <TD> <div id="corner"><IMG SRC="images/frame4_03.gif"></div> <div id="inner"><IMG SRC="screen05_04.jpg"></div> </TD> </TR> </TABLE> cssには： #corner{ position:absolute; left:251px; top:98px; width:99px; height:39px; BACKGROUND-COLOR:#FFFFFF; } #inner{ position:absolute; left:251px top:98px; width:999px; height:799px; } と書いています。 WindowsXP、IE7で表示させています。 よろしくおねがいいたします。
- ベストアンサー
- HTML
- 【CSS】画像を重ねたいのですが動きません
ウェブサイトを作っているのですが、 positionを使って、ひとの写真と影の画像を重ねたいのですが、影がピクリとも動いてくれません。 ちなみに他のスタイルはCSSから読み込めているので、 CSSのインポートエラーではないようです。 難しいことをしているわけではないと思いつつも、 二時間くらいここで止まっておりまして、悲しいです・・・。 下記のコードを書いております。 ご教示頂ければ幸いです。 よろしくお願いいたします。 ☆HTML <div id="staffphoto"> <img src="写真.jpg" width="160" border="0"> <img src="影.gif" border="0" width="160" class="shadow"> </div> ☆CSS #staffphoto{ position: relative; } #staffphoto img.shadow{ position: absolute; top: 5px; left: 5px; }
- ベストアンサー
- CSS
- FireFoxで画像がずれます
ホームページビルダーでHPを作成しました。IEで動作確認後、FireFoxで見ると、 画像がの位置が設定と違います。画像が上にずれているんです。どうしてそうなるのでしょう？どなたか教えてください 記述は <DIV style="top : 929px;left : 35px; position : absolute; z-index : 6; " id="Layer5"><IMG src="0161.gif" width="82" height="33" border="0"></DIV> です。 よろしくお願いします。
- ベストアンサー
- HTML
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- htmlについて教えてください
サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。
- 締切済み
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- 指定時間経過後に画像を一定時間で切替
Javascriptで指定時間経過後に画像を一定時間で切替したいと思っています。 一定時間の画像切替は以下のように実現しています。このJavascriptにさらに”指定時間経過後”という条件を付けたいのですがどうしたらよいでしょうか？ ■Javascript <script> $(document).ready(function(){ $('.slideImg img:gt(0)').hide(); setInterval(function() { $('.slideImg :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideImg '); },5000); }); </script> ■HTML <div class="slideImg "> <img src="img1.jpg" alt="" /> <img src="img2.jpg" alt="" /> <img src="img3.jpg" alt="" /> </div> ■CSS .slideImg{ position:relative; width: 100px; height: 100px; } .slideImg img{ position:absolute; left:0; top:0; }
- ベストアンサー
- JavaScript
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
補足
ありがとうございます；；なまら勉強になりました。 私が今まで疑問で分からなかったことが一気に2個も解消されました＾＾ ちなみに1つわからないのが#Layer2 { top:153px; left:198px; }のtopとleftをいじってしまうと上下の動作が固定位置に戻ってからの移動になってしまうんですが。これはどこが原因でなってるんでしょうか？＞＜