• ベストアンサー

javascript画面を自動で切り替えながら拡大

javascriptを始めたばかりの初心者です。 javascriptを使用し、 画像を切り替えながら動きをつけて拡大表示させる、 という事を自動で行いたい(繰り返し動作で表示させたい)のですが、 可能でしょうか？ 又、同じ画面の中で、そういった画像を4つか5つ表示させ、 個々の画像は別々の動かし方(弧を描く、斜め、下から上、右から左等) をさせる事は可能でしょうか？

  • k_sh
  • お礼率92% (26/28)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

＞機能は追加可能でしょうか？　 何度か回答しているように可能です。もうひとつ別にタイマーを入れるとか。 とりあえずのサンプルに・・・引数なしで、同じ指定だけれど。（サンプルなのでご勘弁） ＞Firefoxだと表示されません fx3.6にて動作確認していますが…　画像のアドレスが違っているとかはないですか？ 文字数制限があるので、内容のみ。（ほとんど#4と同じですが） <div> <input type="button" onclick="objA.stop()" value="stop"> <input type="button" onclick="objA.start()" value="start"> <img id="imageA" src="A.jpg" alt=""> </div> <script type="text/javascript"> <!-- var Lissajous = function(){ this.init.apply(this, arguments); } Lissajous.prototype = { start : function(){ if (!this.timerId && this.element) this.move(); }, stop : function(){ if (this.timerId){ clearInterval(this.timerId); clearInterval(this.timerId2); this.timerId = this.timerId2 = null; } }, move : function(){ var t = this, s = t.element.style, r = t.r; t.timerId = setInterval(function(){ t.ang1 = t.addAngle(t.ang1, t.angle1); t.ang2 = t.addAngle(t.ang2, t.angle2); s.left = (r + r * Math.sin(t.factorA * t.ang1) | 0) + "px"; s.top = (r + r * Math.sin(t.factorB * t.ang1) | 0) + "px"; var size = (t.size + t.sizeDef * (1 + Math.sin(t.ang2)) | 0) + "px"; s.width = size; s.height = size; }, 20); t.timerId2 = setInterval(function(){ t.count = ++t.count % t.images.length; t.element.src = t.images[t.count]; }, this.interval); }, addAngle : function(a, b){ var pi = Math.PI * 2, ag = a + b; if (ag > pi) ag -= pi; return ag; }, init : function(id, r, a, b, t1, size1, size2, t2){ var toRad = Math.PI/180, elm = document.getElementById(id); if (!elm) return; this.element = elm; elm.style.position = "absolute"; this.r = Math.abs(r/2 | 0) || 200; this.factorA = a; this.factorB = b; this.angle1 = t1 * toRad; this.angle2 = t2 * toRad; this.size = size1 || 30; this.sizeDef = Math.abs(size2/2); this.ang1 = 0; this.ang2 = 0; this.images = ["A.jpg","B.jpg","C.jpg"], this.count = 0, this.interval = 3000; this.timerId = null; this.timerId2 = null; this.start(); } } var objA = new Lissajous("imageA", 700, 3, 5, 0.4, 20, 150, 1); //--> </script>

k_sh
質問者

お礼

fujillinさんへ 大変有難うございます。 頂いたサンプルで、正に確認したいと望んでいた事を、確認させて頂く事が出来ました。 Firefoxの件に関しては、画像を指定しなかった場合に、IEだと画像の枠(四角の中に赤い×印が描いてある)が表示されて動きがブラウザで確認できるのですが、Firefoxだとその枠が表示されないので何か不具合なのかと戸惑っておりました。ちゃんと画像を指定したらFirefoxでも表示されました。 何度も質問してしまい、本当にお手数をお掛け致しました。御回答頂きまして、真に有難うございました。

その他の回答 (5)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

#1～#4です。 リサージュ曲線とかみたいに連続しているものなら、違う動作をつなげたりしなくても、ずっと動かしっぱなしにできますね。そんなサンプル。オブジェクト化して複数に対応したもの。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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"> </head> <body> <div> <img id="imageA" src="A.jpg" alt=""> <img id="imageB" src="B.jpg" alt=""> </div> <div style="position:absolute; top:300px;"> <img id="imageC" src="C.jpg" alt=""> </div> <script type="text/javascript"> <!-- var Lissajous = function() { this.init.apply(this, arguments); } Lissajous.prototype = { start : function() { if (!this.timerId && this.element) this.move(); }, stop : function() { if (this.timerId) { clearInterval(this.timerId); this.timerId = null; } }, move : function() { var t = this, s = t.element.style, r = t.r; t.timerId = setInterval(function() { t.ang1 = t.addAngle(t.ang1, t.angle1); t.ang2 = t.addAngle(t.ang2, t.angle2); s.left = (r + r * Math.sin(t.factorA * t.ang1) | 0) + "px"; s.top = (r + r * Math.sin(t.factorB * t.ang1) | 0) + "px"; var size = (t.size + t.sizeDef * (1 + Math.sin(t.ang2)) | 0) + "px"; s.width = size; s.height = size; }, 20); }, addAngle : function(a, b) { var pi = Math.PI * 2, ag = a + b; if (ag > pi) ag -= pi; return ag; }, init : function(id, r, a, b, t1, size1, size2, t2) { var toRad = Math.PI/180, elm = document.getElementById(id); if (!elm) return; this.element = elm; elm.style.position = "absolute"; this.r = Math.abs(r/2 | 0) || 200; this.factorA = a; this.factorB = b; this.angle1 = t1 * toRad; this.angle2 = t2 * toRad; this.size = size1 || 30; this.sizeDef = Math.abs(size2/2); this.ang1 = 0; this.ang2 = 0; this.timerId = null; this.start(); } } var objA = new Lissajous("imageA", 700, 3, 4, 0.6, 20, 120, 1); var objB = new Lissajous("imageB", 500, 8, 5, 0.8, 20, 40, 0.2); var objC = new Lissajous("imageC", 400, 1, 2, 1, 10, 30, 1); //--> </script> </body> </html> 以前の質問Q6119506も沢山を動かす例かな。

k_sh
質問者

お礼

fujillinさん 有難うございます。動きという面では、かなり参考になりました。このソースに、画像を３秒おきに切換える機能は追加可能でしょうか？　 尚、頂いたjavascriptは全て、IEだと見れるのですが、Firefoxだと表示されません。横のスクロールバーだけは動いているので、中身は動作していて、ブラウザに表示されないだけだと思うのですが、こちらFirefoxを主に使用しておりますので、もし原因等おわかりになりましたら教えて頂けますでしょうか？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

#1～#3です。 ＞、再度その動作が可能かどうか御質問出来ますでしょうか？ 「その動作」というのがどのような動作なのかわかりませんので、断言はできませんが… 想像するところ、画像の変更や拡大/縮小および移動の組合せということだと思いますので、可能だと思われます。 ＞あと、<おまけ>は、こちら海外の所為か見れませんでした。 うん？　海外サイトにアクセス制限でもかけているのでしょうか？ 同じものを利用した別のＵＲＬ （こちらは画像ではなくテキストですが…） （#3で挙げたオリジナルのものは、太陽系の惑星画像を回転させているものです） 　http://www.skuare.net/test/j3DRotator.html どちらも、jquery.ｊｓとrotator.jsを利用しています。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

#1、#2です。 ＞更に指定した時間で切り替えて表示する事は可能でしょうか？ 何を切り替えたいのかわかりませんが、多分可能です。 ひとつの動作が終わったら、移動の方向や拡大（縮小）率を替えてまた動作するみたいな意味であるのなら、コールバック関数的なものを付加するか、あるいは全体を統括する部分をつくるなどすればできるでしょう。 ＞ボタン等を使わずに、画面が表示されたら ボタンは単なるきっかけとしての例なので、画面表示をきっかけにするならonloadなどを利用すればよろしいかと。 前回回答の例では、function test()をはずして、Animator.define(～～を直接実行させればそのようになります。 （動作は1回ですが…） ＞ずっと繰り返しで動かしたいのですが、可能でしょうか？ 可能ですが、上例の場合はまったく同じ動きを繰返すのでは連続性がなくなるので、何種類かの動きをループさせて実行するようなことになるのではないでしょうか。 対象が複数あるということなので、オブジェクト化してしまったほうがよさそう。 #1で挙げた「うろちょろ」の後の方の例がオブジェクト化して、object.start()、object.stop()みたいな形で制御できるようになっています。ただし、このときは「うろちょろ」がテーマだったので、移動は質問者様のイメージとは違ってウロチョロですけど…（拡大/縮小もしてないし） どのようなものを作りたいのかのイメージは質問者様にはわかっているのでしょうから、まずは、それぞれを分解して個別に作ってみるのがよいかも。それができれば全体を統合したものも作成できるかと思います。 ＜おまけ＞ 画像が拡大/縮小しながら動き続けていて、かつ、マウスに反応するスクリプトの例（jqueryを使っているらしい） 　http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html

k_sh
質問者

お礼

御回答有難うございます。 切り替えは、例えばmyChange関数で画像を指定した時間でパッパッと切り替えながら、且つその切り替わっている画像を拡大/移動させたい、という意味でした。ネットを検索しましたがイメージに合う物が無く、サンプル等をコピーして来て無理やりくっつけてみましたが動作しなかったので、そもそもjavascriptで可能なのだろうか、と考え、こちらに投稿させて頂きました。本当に分りづらくて済みません。お手数をお掛けして済みませんが、再度その動作が可能かどうか御質問出来ますでしょうか？ ちなみに、動かし方に関しては、「うろちょろ」の☆は、おっしゃられる通り、かなり違うのですが、こんなに不規則な動きを出せるのだと、勉強させて頂きました。有難うございます。 あと、<おまけ>は、こちら海外の所為か見れませんでした。。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

//つづき animation: function(e, p, cnt) { 　var c = 0, i, s = e.style; 　var tId = setInterval(function() { 　　for (i in p) s[i] = (p[i](c) | 0) + "px"; 　　if (++c > cnt) { 　　　clearInterval(tId); 　　　e = p = s = tId = null; 　　} 　}, 30); }, setParam: function(p, opt, arg) { 　var start, end, t; 　start = this.getStyle(arg.element, p); 　if (start===null) return; else start = parseInt(start); 　end = start * opt.rate || +opt.value; 　if (end===undefined || isNaN(end)) return; 　t = opt.transition; 　if (!this.trans[t]) t = "linear"; 　arg.param[p] = this.trans[t](start, end, arg.count); }, trans: { 　linear: function(s, e, cnt) { 　　var d = e-s; 　　return function(c) {return c*d/cnt+s;} 　}, 　sin: function(s, e, cnt) { 　　var d = e-s, pi=Math.PI/2; 　　return function(c) {return d*Math.sin(c*pi/cnt)+s;} 　}, 　cos: function(s, e, cnt) { 　　var d = e-s, pi=Math.PI/2; 　　return function(c) {return e-d*Math.cos(c*pi/cnt);} 　} }, define: function(id, option, time) { 　var elm = document.getElementById(id); 　if (!elm) return; 　var opt, p, arg = {}; 　var i = 0, cnt = time/30 | 0; 　if (cnt <= 0) cnt = 1; 　arg.element = elm, arg.count = cnt, arg.param = {}; 　for (p in option) { 　opt = option[p]; 　switch (this.propertys[p]) { 　　case 1: 　　　this.setParam("width", opt, arg); 　　　this.setParam("height", opt, arg); 　　　break; 　　case 2: 　　　this.setParam(p, opt, arg); 　　　break; 　　default: 　　} 　} 　p = arg.param, arg = null; 　this.animation(elm, p, cnt); } } // defineの引数 // id, { property:{rate/value:value, [transition:type]}, ・・・}, 時間(msec) // function test() { 　Animator.define("imageA", { 　size:{rate:4, transition:"linear"}, 　left:{value:600, transition:"sin"}, 　top:{value:500, transition:"cos"} 　}, 5000); 　Animator.define("imageB", { 　width:{value:300, transition:"sin"}, 　left:{value:0}, 　top:{value:600} 　}, 2500); 　test = new Function; } //--> </script> </body> </html>

k_sh
質問者

お礼

IEにて動作確認させて頂きました。有難うございます。 こちら、画像を拡大/移動させつつ、更に指定した時間で切り替えて表示する事は可能でしょうか？又、ボタン等を使わずに、画面が表示されたらずっと繰り返しで動かしたいのですが、可能でしょうか？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないようなので… ご質問のようなことは基本的に可能ですが、全体を一般化して作るとなると、それなりのものになりそうです。 通常、画像の拡大縮小は画像サイズ（width/height）を、移動は表示位置（left/top）を連続的に変えることで実現しています。 拡大や移動の動作のパターンに応じて、計算処理を用意しておくような感じになるでしょうか。 ＞javascriptを始めたばかりの初心者です とのことなので、いきなり全部をやろうとするとちょっとハードルが高いかも… 最初に、個々のアニメーションの仕組みを理解して、拡大や単純移動のものを作成してみるのがよろしいかと。 それから、複数のものを同時に処理するように一般化したり、動作のバリエーションを追加できる仕組みを考えるなど… 一から作るのが面倒であれば、jqueryなどのanimateやeasingを利用するのも一法かと。 　http://semooh.jp/jquery/api/effects/animate/params%2C+%5Bduration%5D%2C+%5Beasing%5D%2C+%5Bcallback%5D/ 　http://semooh.jp/jquery/cont/doc/easing/ 一様ではない動きに関しては、以前の「うろちょろ」という質問が参考になるかも（ならないかも？）。 　http://okwave.jp/qa/q6168456.html 回答者達のその後の追加が、babu_babu_babooさんのところで行われているので、そちらも… 　http://d.hatena.ne.jp/babu_babu_baboo/20100911 　http://d.hatena.ne.jp/babu_babu_baboo/20100914 これだけだと回答にならないので、ごく簡単なそれっぽいものを作ったのでとっかかりのご参考にでも… （書きっぱなしで、かなりいい加減です。なので実使用は無理。入力チェックも適当だし） スタートボタンのクリックで一応動作しますが、連続クリックのチェックも省いているので、一回のみの動作にしています。 実際に使うには全体構成をちゃんとする必要があるし、要素が動作中に次の動作指示がきたときの仕組みなども考えておく必要がありそう。（ストックしておくとかキャンセルするとか） 指定する値やtransition（linear、sin、cos）を変えれば動きも変わります。一応、違う動きを新しく追加できるようにはなっています。 （多分、文字数制限にかかるので2分割になります。全角空白は半角にしてください） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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"> #box { position:relative; } #box img { position:absolute; width:50px; height:50px; } #box #imageA { left:0; top:0; } #box #imageB { left:650px; top:0; } </style> </head> <body> <div style="padding:20px;"> <button type="button" onclick="test()">START</button> </div> <div id="box"> <img id="imageA" src="A.jpg"> <img id="imageB" src="B.jpg"> </div> <script type="text/javascript"> <!-- var Animator = { propertys: {size:1, width:2, height:2, left:2, top:2}, getStyle: function(e, a) { 　return (e.currentStyle)? e.currentStyle[a]: 　getComputedStyle?document.defaultView.getComputedStyle(e, '').getPropertyValue(a):null; },

k_sh
質問者

お礼

御回答頂き、大変有難うございます。 御教示頂いた内容を元に、もう少し勉強したいと思います。 伝わり辛いイメージだけで質問してしまって済みません。 本当に有難うございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptを使って画像の拡大

    JavaScriptを使って画像の拡大をしようとしています。 Fancyzoomを使って画像の拡大はできるようになったのですが、 IE6だと、セレクトボックスが拡大した画像の上に表示されてしまいます。 調べていくとIE6のセレクトボックスにはZindexが利かないことが分かりました。インラインフレームとdivを使えばセレクトボックスを画像の下に隠すことが可能だとはわかったのですが、 Fancyzoomの何処を変更すればいいのかわかりません。 すみませんが、ご教授を頂けないでしょうか？ 途方にくれています。どうか、よろしくお願いします。

  • javascriptで画像縮小と拡大は。。

    初心者です。 javascriptで、画像をクリックすると拡大、もう一度クリックすると縮小するには、どうすればよいのでしょうか？？

    • 締切済み
    • Mac
  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • javascript　スムーズな動作

    javascriptに関する質問です。 例えば下のようなコードを書いたとします。 if(e.keyCode==39)X=X+10; if(e.keyCode==37)X=X-10; document.getElementById('me'); me.style.left=X; つまり、十字キーの右を押したらキャラクター「me」が10px右へ、左を押したら10px左へ動きます。 質問したいのはキーを押しっぱなしにした場合の動作に関してです。 右を押すと、右へ一度動いて、そこで一度止まり、その後ザーっと動き出します。最初の動作の後にほんのわずかなんですが、「ため」のような間があるために満足いく動きが出せていません。 キーを押した瞬間からスムーズに動かすにはどうしたらよいでしょうか？

  • 突如!!画面表示拡大!?

    私は自宅の家族兼用で使用しているPCを利用しています。 私がやったのか家族がやったのか分かりませんが、画面表示が大きくなってとても見にくくなってしまいました。 ちゃんと表示できていますが右側が隠れてしまうので文などを読んでいるときなんかは下の棒（？;;を右にスライドしていちいち読んでいます。 どうやって設定を変えれば良いのでしょうか。 あともう一つ。 なぜか画質も非常に悪くなりました。 画像なんて読み込めないほど汚くなってしまいました。 拡大しているからなのでしょうか。 変なドット絵で分かりません。

  • JavaScriptでアニメーションを作成

    JavaScript初心者です。よろしくお願い致します。 現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。 アニメーションの動きは下記のとおりです。 Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。 その上にBの画像を配置（位置はAのこの位置…と決められています）。 ↓ 画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。 その拡大方法なのですが、それぞれの中心から拡大するのではなく、 ちょうど建物の前に犬がいるところに近づくような アニメーションを施したいと思います（※添付画像を参考）。 参考になるサイト、およびｊQueryなどありいましたら教えてください。 なにぶん、JavaScriptを使いはじめてまだ間もないので、 参考書を探すのにも苦労している次第です。 よろしくお願い致します。

  • javascriptかjQueryか・・・

    ホームページ作成・・・スライドするメニューについてです。 javascriptなどは初心者です。 例えばmixiの右下メニューの中の、「コラボ特集」のようなメニューを作りたいと思っております。 詳細としては、まずHPを開いたら、横長のボックスメニューが出てきます。 最初に3枚の画像が表示されています。4枚目以降は、右に格納(見えない)されていて、4枚目の画像の頭だけが少し出ています。⇒右矢印をクリックすると、4枚目、5枚目が表示され、同時に1枚目、2枚目は左に格納(見えない)されていきます。 逆に←左矢印をクリックしていったら、1枚目、2枚目の画像が現れていく・・・ つまり、常に表示される画像は3枚で、右と左に画像が少しずつ頭を出している、というメニューを作りたいんですね。 その画像には詳細ページへ飛ぶリンクボタンもつけます。 オンマウスで矢印マークが浮かび上がり、マウスが離れると、画像だけのメニューに戻るというのが理想ですが、複雑すぎるのでしたら、常に左右ボタンがついていてもかまいません。 詳しいコードや、URLを教えていただけたら嬉しいです。 「これをアレンジしてみてください」というのは、もしかしたら私には難しすぎると思いますので、できるだけ詳細をお願いします。 わかりにくい説明で申し訳ありません・・・。 皆さまお忙しい中恐縮ですが、どうぞよろしくお願いします。

  • amazonの商品画像拡大のようなjavascriptライブラリを探し

    amazonの商品画像拡大のようなjavascriptライブラリを探しています。 なかなか見つからず、自分で作るしかないのかと困っています。（javascriptは超初心者・・・）どなたかご存じないないでしょうか？ こちらのような↓ http://www.amazon.co.jp/gp/product/images/B0034KZXBE/ref=dp_image_z_0?ie=UTF8&n=637394&s=videogames (1)クリックでスムーズにアニメーション拡大 (2)マウスで画像をつかんで移動 できるのを探しています。 jQueryだとベストですが、他のでも構いません。 よろしくお願いします。

  • マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptを探しています

    マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptってないですかね？ ■はじめは、サムネイルのような小さい画像を表示。 ■マウスを乗せると少し大きくなる。 ■もっと、大きい画像が見たい場合はクリックして見ることができる。 こんな使用を考えているのですが、私の力では、一から書くことなど到底できそうにありません。 どなたか、こういったことを作ったページや参考になるページなどありましたら教えてください。 宜しくお願い致します。

  • JavaScriptが動かない～。

    JavaScriptを使って 別ウィンドを開いたり、トップメニューを 開くたびに違う画像を表示できるように ＨＰをつくりました。 ホームページビルダーで動作確認したときは きちんと動くのに、 実際にサーバーにアップロードすると 全く動作しなくなってしまい、 ほんとに困っています。 ＰＣ初心者なため、どこが悪いのか全然わからないんです。助けてくださ～～い。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する