- 締切済み
【java】背景画像を一定時間でフェード切り替え
idhokanohiの回答
- idhokanohi
- ベストアンサー率45% (9/20)
とりあえずそのサイトは古すぎるといっておきます。 個人用途なら問題ありませんが、公開するのであれば FireFox(Gecko系)やChrome(webkit系)も考慮しないといけません。 IEも7ぐらいから標準準処に近づいてきていますが、IE独自仕様のものを使用しても他のブラウザでは使えません。 css3に関しても各ブラウザによって実装度は違います。 出来るけど、質問者様のレベル的に面倒そうだという結論でスルーされてるのではないでしょうか。 というのはまあおいといて。bodyの背景画像にこだわらないのであれば jQueryとjQueryを利用したプラグインを利用すれば簡単に実装できます。 http://matome.naver.jp/odai/2132859679359719601
関連するQ&A
- jQueryでの画像のフェードインのループ
jQuery初心者です。 jQueryで3枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、1週ループまでは上手くいくのですが、2週目に2枚目の画像で止まってしまいます。 下記だと何故2週目の2枚目で止まるのか?の原因と、スマートな書き方をご教授頂けませんか? <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>
- ベストアンサー
- JavaScript
- 【jquery】スクロールで背景画像もついてくる
よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1(1.jpg)をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2(2.png:透過画像)をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> ~略~ </div> <div id="contents"> ~略~ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> ~略~ </div> <div id="haikei"> <div id="contents"> ~略~ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる?ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 (途中までしか画像がついてきてくれない感じです) 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・? もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り
jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り替えるスクリプトについてご質問です。 http://medienfreunde.com/lab/innerfade/ html のロード時に数枚の切り替え予定の画像がスクリプトが 読み込まれる前に全部表示されてしまって格好が悪いので、 表示させないようにする為には、どうすればよろしいでしょうか? 特に上記のスクリプトを用いなくても代替えのスクリプトがあれば、そちらでも構いません。
- ベストアンサー
- JavaScript
- フェードによる<div>要素の背景画像の切り替え
以下のようにして、背景画像を切り替えておりますが、 これにフェード効果を追加することは可能でしょうか。 -html- <div id="wrapper"></div> -javascript- $(function() { var i = 1; setInterval(function() { if(i > 3) i = 1; $("#wrapper").css("background","url('./images/img"+i+".jpg')"); i++; }, 4000 ); }); もし可能でしたら、具体的なソースコードも 教えて頂けますと非常に助かります。 どうぞ宜しくお願い申し上げます。
- 締切済み
- JavaScript
- 指定した背景画像を数秒ごとに切り替えるプラグイン
java初心者です。 というか申し訳ありませんが全くわかりません。 しかし、どうしても指定した背景画像を数秒ごとに切り替えなければならなくなり、 下記のサイトで jQueryプラグインをダウンロードしたのですが使い方が全くわかりません。 http://rewish.org/demo/jquery_bg_switcher/ ダウンロードしたファイルの中にあったexample.htmlを見たのですが どこで背景画像を変更したらいいのか分からず、 <title>jQeury.bgSwitcher.js</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> head内にあるこの文章の意味もわかりません。 下の<script src="../jquery.bgSwitcher.js"></script>はjquery.bgSwitcher.jsの場所を指定しいるということはわかるのですが、なぜ上の2行にはgoolgeがついているのか。 flashを使わず背景画像を変更したいのですが、どなたか使い方が分かる方はいらっしゃいますか。いたら教えていただけたらうれしいです。 また、start、stopなどの機能もついていたのですが、私には必要なく TOPのメイン画像を背景画像に指定し、3、4秒で順番に切り替えたいのです。 (現在未定ですが、もしかしたら5枚ほど画像を切り替えたら最後の1枚で画像をstopさせるかもしれません) ちなみに画像は imgフォルダの中に入っていて main1からmain5の5枚あり、widthが770pxにheightが279pxです。 もし他にもっと簡単なやり方などあれば教えていただけたらうれしいです。 javaのことが全然分からないため至らぬ点が多々あると思いますが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 指定時間経過後に画像を一定時間で切替
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
- 画像をランダムにフェードイン
【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像1" /></li> <li><img src="画像2" /></li> <li><img src="画像3" /></li> <li><img src="画像4" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか? よろしくお願いします。
- 締切済み
- JavaScript
- jQueryで、画像クリック→フェードイン
初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){ $("#mainimg img").attr("src","img/topimg1.jpg"); $("#mainimg p:not(:animated)").fadeIn("slow"); }) ・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素(大きい画像が表示されるところ)の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- ビットマップ画像による背景繰り返しにフェードイン
Flashのbitmap画像について質問です。 使用ソフト、FlashCS5 AS2 ビットマップ画像を全画面Flashで背景として表示させているのですが、 この背景画像を徐々にフェードインさせたいと思っています。 下記スクリプトを設置しているのですが これにフェードインさせる方法をわかる方がおられましたら お教え頂けませんでしょうか。 bmp = flash.display.BitmapData.loadBitmap("background"); mat = new flash.geom.Matrix(); _root.beginBitmapFill(bmp, mat,true,true); _root.moveTo(0, 0); _root.lineTo(Stage.width, 0); _root.lineTo(Stage.width, Stage.height); _root.lineTo(0, Stage.height); _root.endFill(); どうぞ宜しくお願いいたします。
- ベストアンサー
- Flash
- 指定した背景画像をサイトを訪れるたびに切り替える
Javascript初心者で、全く見当がつきません。 お力をお貸しください。 参考サイトのように、 Bodyではなく、DivのID一部分のみ、 背景画像がサイトを訪れるたびに切り替わるようにしたいのですが, どのサンプルも「Body」の背景が変わってしまいます。 どなたか、お答えして頂けないでしょうか? <参考サイト> http://www.upenn.edu/ <現在記述中のソース> <html> <head> <style type="text/css"> #content { color: #ffe700; font-size: 30px; height: 600px; } </style> <title>見る度に背景色が変わります</title> <script language="JavaScript"> <!-- function color(){ bgcolor = "#"; for(i = 0 ; i < 6 ; i++) { //0から15の乱数を発生させる color = Math.floor(16 * Math.random()); //16進数に変換 color = color.toString(16); //つなぎ合わせる bgcolor = bgcolor + color; } //文字列を背景色に document.bgColor = bgcolor; } //--> </script> </head> <body onLoad="color()"> 見る度に背景色が変わります<br> <div id="content"> ここの背景にランダムに画像が変更して欲しい。Bodyではなく、Divの指定したID内にのみ表示して欲しいのです</div> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 bodyの背景にこだわっているので、お教えいただいたjQueryだと難しそうです・・・。 >出来るけど、質問者様のレベル的に面倒そうだという結論でスルーされてるのではないでしょうか。 別の質問になってしまい、恐縮ですが、 今回のこの質問でそうご判断されたのでしょうか? もしくはこれ迄の質問をご覧になられての判断でしょうか? 教えてgooの仕組みがいまいちわからず・・・。