- ベストアンサー
javascript画面を自動で切り替えながら拡大
javascriptを始めたばかりの初心者です。 javascriptを使用し、 画像を切り替えながら動きをつけて拡大表示させる、 という事を自動で行いたい(繰り返し動作で表示させたい)のですが、 可能でしょうか？ 又、同じ画面の中で、そういった画像を4つか5つ表示させ、 個々の画像は別々の動かし方(弧を描く、斜め、下から上、右から左等) をさせる事は可能でしょうか？
- k_sh
- お礼率92% (26/28)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- fujillin
- ベストアンサー率61% (1594/2576)
#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も沢山を動かす例かな。
お礼
fujillinさん 有難うございます。動きという面では、かなり参考になりました。このソースに、画像を３秒おきに切換える機能は追加可能でしょうか？ 尚、頂いたjavascriptは全て、IEだと見れるのですが、Firefoxだと表示されません。横のスクロールバーだけは動いているので、中身は動作していて、ブラウザに表示されないだけだと思うのですが、こちらFirefoxを主に使用しておりますので、もし原因等おわかりになりましたら教えて頂けますでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
- fujillin
- ベストアンサー率61% (1594/2576)
#1、#2です。 ＞更に指定した時間で切り替えて表示する事は可能でしょうか？ 何を切り替えたいのかわかりませんが、多分可能です。 ひとつの動作が終わったら、移動の方向や拡大（縮小）率を替えてまた動作するみたいな意味であるのなら、コールバック関数的なものを付加するか、あるいは全体を統括する部分をつくるなどすればできるでしょう。 ＞ボタン等を使わずに、画面が表示されたら ボタンは単なるきっかけとしての例なので、画面表示をきっかけにするならonloadなどを利用すればよろしいかと。 前回回答の例では、function test()をはずして、Animator.define(～～を直接実行させればそのようになります。 （動作は1回ですが…） ＞ずっと繰り返しで動かしたいのですが、可能でしょうか？ 可能ですが、上例の場合はまったく同じ動きを繰返すのでは連続性がなくなるので、何種類かの動きをループさせて実行するようなことになるのではないでしょうか。 対象が複数あるということなので、オブジェクト化してしまったほうがよさそう。 #1で挙げた「うろちょろ」の後の方の例がオブジェクト化して、object.start()、object.stop()みたいな形で制御できるようになっています。ただし、このときは「うろちょろ」がテーマだったので、移動は質問者様のイメージとは違ってウロチョロですけど…（拡大/縮小もしてないし） どのようなものを作りたいのかのイメージは質問者様にはわかっているのでしょうから、まずは、それぞれを分解して個別に作ってみるのがよいかも。それができれば全体を統合したものも作成できるかと思います。 ＜おまけ＞ 画像が拡大/縮小しながら動き続けていて、かつ、マウスに反応するスクリプトの例（jqueryを使っているらしい） http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
お礼
御回答有難うございます。 切り替えは、例えばmyChange関数で画像を指定した時間でパッパッと切り替えながら、且つその切り替わっている画像を拡大/移動させたい、という意味でした。ネットを検索しましたがイメージに合う物が無く、サンプル等をコピーして来て無理やりくっつけてみましたが動作しなかったので、そもそもjavascriptで可能なのだろうか、と考え、こちらに投稿させて頂きました。本当に分りづらくて済みません。お手数をお掛けして済みませんが、再度その動作が可能かどうか御質問出来ますでしょうか？ ちなみに、動かし方に関しては、「うろちょろ」の☆は、おっしゃられる通り、かなり違うのですが、こんなに不規則な動きを出せるのだと、勉強させて頂きました。有難うございます。 あと、<おまけ>は、こちら海外の所為か見れませんでした。。
- fujillin
- ベストアンサー率61% (1594/2576)
//つづき 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>
お礼
IEにて動作確認させて頂きました。有難うございます。 こちら、画像を拡大/移動させつつ、更に指定した時間で切り替えて表示する事は可能でしょうか？又、ボタン等を使わずに、画面が表示されたらずっと繰り返しで動かしたいのですが、可能でしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないようなので… ご質問のようなことは基本的に可能ですが、全体を一般化して作るとなると、それなりのものになりそうです。 通常、画像の拡大縮小は画像サイズ（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; },
お礼
御回答頂き、大変有難うございます。 御教示頂いた内容を元に、もう少し勉強したいと思います。 伝わり辛いイメージだけで質問してしまって済みません。 本当に有難うございます。
お礼
fujillinさんへ 大変有難うございます。 頂いたサンプルで、正に確認したいと望んでいた事を、確認させて頂く事が出来ました。 Firefoxの件に関しては、画像を指定しなかった場合に、IEだと画像の枠(四角の中に赤い×印が描いてある)が表示されて動きがブラウザで確認できるのですが、Firefoxだとその枠が表示されないので何か不具合なのかと戸惑っておりました。ちゃんと画像を指定したらFirefoxでも表示されました。 何度も質問してしまい、本当にお手数をお掛け致しました。御回答頂きまして、真に有難うございました。