- ベストアンサー
コンテンツを上下に動かすには
- Javascript初心者です。よろしくお願いします。コンテンツをふわふわと上下に動かしたいです。
- 複数のコンテンツを動かしたいのですが、それぞれに速度やふり幅を変えるにはどうすれば良いでしょうか。
- また一定ではなくふり幅も２種類を繰り返し設定したい場合は、どうすれば良いのでしょうか。
- karup
- お礼率96% (233/241)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
かいとうがつきませんね。 jQuery をつかっていません。 ふりはばは、[[x,y],[x1,y1],......]のように 相対的な座標をしてい します さゆうにも、えんけいにも、うごけます ぜんかくくうはくは、はんかくにおきかえてください <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <body> <div id="hoge"> <p>test</p> <img src="" alt="" id="g0"> <img src="" alt="" id="g1"> <img src="" alt="" id="g2"> <img src="" alt="" id="g3"> </div> <script> (function () { var DEFAULT_OFFSET_POSITION = [[0,0], [2,1], [4,3], [2,1], [0,0], [-2,1], [-4,3], [-2,1]]; function getPosition (e) { for (var x = 0, y = 0; e; e = e.offsetParent) x += e.offsetLeft, y += e.offsetTop; if ('undefined' === typeof this.x) this.x = x; if ('undefined' === typeof this.y) this.y = y; return this; } function Dancer (target, offsetAryPoint, interval, position) { this.target = target; this.point = offsetAryPoint; this.interval = interval; this.position = position; this.timerId = null; this.index = 0; this.max = offsetAryPoint.length; } function LOOP () { var n = this.index; var s = this.target.style; s.top = this.position.y + this.point[n][1] + 'px'; s.left = this.position.x + this.point[n][0] + 'px'; this.index = (n + 1) % this.max; } function start () { var that = this; if (! this.timerId) this.timerId = setInterval (function () { LOOP.call (that) }, this.interval); return this; } function stop () { clearInterval (this.timerId); this.timerId = null; return this; } function create (target, offsetAryPoint, interval, position) { if (1 > arguments.length) throw new Error; var p = getPosition.call (position || { }, target); var s = target.style; s.position = 'absolute'; s.top = p.y + 'px'; s.left = p.x + 'px'; var obj = new Dancer ( target, offsetAryPoint || DEFAULT_OFFSET_POSITION, interval || 50, p ); return obj.start (); } Dancer.prototype.start = start; Dancer.prototype.stop = stop; Dancer.create = create; this.Dancer = Dancer; }) (); var src = 'data:image/gif;base64,' + 'R0lGODlhGAAYALMAAPr4+wBlAQaPARF9CSylD0K9Gk3OHlqzNFnSG23WMHa/TKHfXa3lbczs' + 'ocDpgf///yH5BAEAAA8ALAAAAAAYABgAAATZ8Mkpg72Wah3GWYzjMMsxBBtlKU7jvq6jZFvH' + 'wPjLnNzQxoyg8Ndw8CaBW4O0aDqdPwaqoig+r02GAFFozCSDJfaqBZgPjcEjcHCMn2UzQNA4' + 'WJhvkEAOaAhAdyAMH1h7cn4kUgNMewIGCJAIhmZ+BYkDiwuTW5CTfQIFCAkgmAwJngIEnpWR' + 'CTsDCVyefJ+hkQYJmLaqtJSgkZEFagQIj7x8lQbKywgEYMsGBZPJ0MtqEgTQ0p/V0M4TBMTQ' + 'Ao7dxt/g2ebd4Snh697o7gQF3QXtKRvh+/v5EQA7'; var imgs = document.getElementById ('hoge').getElementsByTagName ('img'); imgs[0].src = imgs[1].src = imgs[2].src = imgs[3].src = src; var circle = (function (r, n) { for (var a = [], i = 0; i < n * 2; i++) a[i]=[Math.sin (i * Math.PI / n) * r |0, Math.cos (i * Math.PI / n) * r]; return a; }) (50, 60); Dancer.create (imgs[3], circle, 30, {x:300, y: 200}); Dancer.create (imgs[2], [[0,1], [0,2], [0,4], [0,6], [0,4], [0,2], [0,1], [0,0]], 50); Dancer.create (imgs[1], [[0,1], [0,2], [0,4], [0,6], [0,4], [0,2], [0,1], [0,0]], 100); Dancer.create (imgs[0]); </script>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＞上記ブログに書いてあった下記コードを20個記載しています 基本的にはそれでも問題はないと思います。 数を増減したり、変更したりするときにコードをいちいち修正しなければならないのが、面倒といえば面倒ですが… もう少し効率よく行ないたいというのであれば、可変にしたい部分を引数で定義できるような形にして、オブジェクト化しておくと、あとは個数分そのオブジェクトをnewなどで作れば良くなります。 オブジェクト化に関しては、以下あたりをご参考になさってください。 http://www.graviness.com/javascript/object.html http://ja.wikibooks.org/wiki/JavaScript_%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9 http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs04/ajaxjs04_01.html http://www.graviness.com/virgo/javascript/object.html Ｎｏ1様がすでにその例を提示なさっていますが、ほぼ似たような例を… （jQueryを使用していないのと、三角関数で動かす点も同じアイデアになっちゃってますが…） 周期（時間）、ふり幅（配列指定可能）、基準の表示位置、移動変換用関数などを指定可能な引数にしてあります。 停止用のボタンはおまけです。（あってもなくても問題ありません） とりあえずのサンプルなので、解説はなしです。 （全角空白は半角に） <!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 id="hoge"> <img src="A.jpg" alt="A"> <img src="B.jpg" alt="B"> <img src="C.jpg" alt="C"> <input type="button" value="stop1" onclick="fuga[0].stop();"> <input type="button" value="stop2" onclick="fuga[1].stop();"> <input type="button" value="stop3" onclick="fuga[2].stop();"> </div> <script type="text/javascript"> <!-- var moveImage = function(elm, p){ this.element = typeof elm === "string"? document.getElementById(elm):elm; this.moveFlag = false; this.params = { duration : p.duration || 1000, amplitude : p.amplitude.length?p.amplitude:[p.amplitude], top : p.top || 0, left : p.left || 0, locus : p.locus || function(d){ return Math.sin(2 * d * Math.PI); } } this.index = 0; this.augument = 30 / this.params.duration; this.element.style.position = "absolute"; this.element.style.top = this.params.top + "px"; this.element.style.left = this.params.left + "px"; } moveImage.prototype = { start : function(){ if(this.moveFlag) return; this.moveFlag = true; this.move(); return this; }, stop : function(){ this.moveFlag = false; }, move : function(){ var t = this; var e = t.element, i = t.index; var a = t.augument, p = t.params; var amp = p.amplitude[t.index]; var d = 0; var t_id = setInterval(function(){ d += a; if(d>1) d = 1; var tmp = (p.top + p.locus(d) * amp) | 0; e.style.top = tmp + "px"; if(d == 1){ clearInterval(t_id); t.index = ++t.index % p.amplitude.length; if(t.moveFlag) t.move(); } }, 30); } } var hoge = document.getElementById("hoge").getElementsByTagName("img"); var fuga = []; fuga[0] = new moveImage(hoge[0], { amplitude:[10, 30, 60], top:100 }).start(); fuga[1] = new moveImage(hoge[1], { duration:2000, amplitude:30, top:200, left:200 }).start(); fuga[2] = new moveImage(hoge[2], { amplitude:[30, 10], top:300, left:300 }).start(); hoge = null; //--> </script> </body> </html>
お礼
fujillin様回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 オブジェクト化は良く分からないので、早速リンクしてくださったサイトを読ませていただきます。 Ｎｏ1様もそうでしたが、fujillin様もオブジェクトを自由自在に動かせて 本当に本当にすごいです！！ 書いてくださったコードを元に、ふわふわしたコンテンツを頑張ってみます。 ありがとうございました！！
お礼
babu_baboo様 回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 すすすすごいです！！！！ 正直にいうと、半分くらい書いてもらったコードが理解出来ていないのですが こまかく調整できて、まさに自分がやりたいことでした。 ありがとうございました！