- ベストアンサー
コンテンツを上下に動かすには
- Javascript初心者です。よろしくお願いします。コンテンツをふわふわと上下に動かしたいです。
- 複数のコンテンツを動かしたいのですが、それぞれに速度やふり幅を変えるにはどうすれば良いでしょうか。
- また一定ではなくふり幅も２種類を繰り返し設定したい場合は、どうすれば良いのでしょうか。
- karup
- お礼率96% (233/241)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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様 回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 すすすすごいです！！！！ 正直にいうと、半分くらい書いてもらったコードが理解出来ていないのですが こまかく調整できて、まさに自分がやりたいことでした。 ありがとうございました！