コンテンツを上下に動かすには
- Javascript初心者です。よろしくお願いします。コンテンツをふわふわと上下に動かしたいです。
- 複数のコンテンツを動かしたいのですが、それぞれに速度やふり幅を変えるにはどうすれば良いでしょうか。
- また一定ではなくふり幅も２種類を繰り返し設定したい場合は、どうすれば良いのでしょうか。
- ベストアンサー
コンテンツを上下に動かすには
Javascript初心者です。よろしくお願いします。 コンテンツをふわふわと上下に動かしたいです。 下記サイトの「ふわふわしてるコンテンツ」を参考にしました。 http://kaelab.ranadesign.com/mtctrl/mt-search.cgi?blog_id=1&tag=jQuery&limit=20 複数（20個程）のコンテンツを動かしたいのですが それぞれに速度やふり幅を変えるにはどうすれば良いでしょうか。 今は、上記ブログに書いてあった下記コードを20個記載しています。 (function(){ var i = 0; (function move(){ i = i > 0 ? -1 : 1; var p = $("#test01").position().top; $("#test01").animate({ top: p + i * 3 }, { duration: 500, complete: move }); })(); })(jQuery); また一定ではなく animate({ top: p + i * 3 }と animate({ top: p + i * 8 } というふうに、ふり幅も２種類を繰り返し設定したい場合は どうすれば良いのでしょうか。 よろしくお願いします。
- 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様もオブジェクトを自由自在に動かせて 本当に本当にすごいです！！ 書いてくださったコードを元に、ふわふわしたコンテンツを頑張ってみます。 ありがとうございました！！
関連するQ&A
- jQueryのforループ時のanimate
jQueryにて下記のように 配列にて登録した要素に対して forループにてanimateを実行し、 completeで、animate完了後の動作を実行したいのですが、 forループにて複数に対して処理を行った際の挙動がおかしく、 動作を実行する前にcompleteの処理が走ってしまいます。 どのようにすれば、forループで複数のanimate処理をおこなっても 動くことができるようになるのか、 教えて頂けますよう宜しくお願いいたします。 -------------------------------------------------------------------- $(document).ready(function () { for(i=0; i<10; i++){ pArray($('p').eq(i)); }; for(i=0; i<10; i++){ pArray[i].stop().animate({left: -100 * i}, {duration:1500, easing:'swing',complete:aaa()}); } function aaa(){ alert('完了') } }
- 締切済み
- JavaScript
- jqueryで作ったアコーディオンメニューの挙動
jQuery初心者です。 http://triplexxx.jp/archives/150 こちらのサイトを参考にアコーディオンメニューを作成しました。 スムーズなスライドのメニューは出来たのですが、 どのメニューもリンクが効きません。 return falseをreturnに変えると効くようになりますが、 当然のことながらページのトップに遷移してしまいます。 どなたか解決策をご存知の方がいらっしゃいましたらご教授下さい。 いちお自分が書いたコードを載せておきます =================================================== var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); var params = {height:"toggle", opacity:"toggle"}; $this.click(function(){ j$(this).next().animate(params, {duration:"fast"}).parent().siblings().children("ul:visible").animate(params, {duration:"fast"}); return; }); }); }); }); ===================================================
- ベストアンサー
- AJAX
- jquery 追従メニュー IEについて
下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>
- 締切済み
- JavaScript
- メインウィンドウサイズの高さを500ピクセル以下に制限する方法を教えてください。
お世話になっております。 現在、スクロールメニューバーでコンテンツを作っていますが、 スクロールするメニューの高さよりウインドウの高さを小さくすると、 エクセルの様にスクロールバーが永遠と続きます。 苦肉の策として、ウインドウの高さをメニューバーの高さより小さく出来ないようにしようと考えましたが、方法がわかりません。 教えてください。 ちなみに、現状のjavascripｔは下記のものを使用しています。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $("#sidebar").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); </script>
- 締切済み
- JavaScript
- animateを使用したマウスオーバー時の反応
jQuery初心者で、知識が浅いのでご教授頂けると幸いです。 横１列に下記のような順番でテキストや画像を並べています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ タグ 画像 テキストテキストテキスト テキスト ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ このBOX自体に class="top_odai" とつけています。 これが30段程、同じものが繰り返されます。（タグやテキスト内容は変わります。画像は同じものです） .top_odai内のリンクを探して、このBOX全体がリンクになるように設定しています。 マウスオーバー（hover）すると、「画像が少し大きくなる＆タグが左にずれる」動作が起きるようにしました。 テキスト自体は、色が変わってシャドウが付きます。 この設定をjQueryで書いてみました。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー $(document).ready(function() { var linkboxes = $('.top_odai'); for (var i=0; i<linkboxes.length; i++){ var readmores = $('div.title'); for (var j=0; j<readmores.length; j++){ $('.top_odai').click(function() { var anchorTags = this.getElementsByTagName("a"); window.location = anchorTags[0].href; }); } } }); $(function(){ $('.top_odai') .each(function(){ $('.top_odai div.headwill img').css({'width':'20px','height':'20px'}); }) .hover(function(){ $(this).addClass('top_odai_hover'); $('div.title a').css({'color':'#FF3300','text-decoration':'none'}); $('.top_odai div.headwill img').stop().animate({'width':'30px','height':'30px','marginTop':'-5px'},'normal'); }, function(){ $(this).removeClass("top_odai_hover"); $('div.title a').css({'color':'#525252','text-decoration':'none'}); $('.top_odai div.headwill img').stop().animate({'width':'20px','height':'20px','marginTop':'0px'},'normal'); } ); }); ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー これで、記述はかなりスマートじゃないと思いますが、、、一応希望通りの動きはします。 ただこれでは全ての「class="top_odai"」に反応してしまいます。 １つのリンクに触れると、他の段の全てのBOXが同じく動いてしまいます。 下記は動作のテストページになります。 http://music333.oops.jp/test/test.html これを１つのリンクに触れたら、そのBOX（.top_odai）だけ上記の動きを させたいのですが、どのようにすれば良いのか、、、かなりハマっております。 各top_odaiに連番のidを割当て指定してみたりと色々試してみましたが全滅でした。 どのように書き換えたら、良いでしょうか？ アドバイス・ご教授どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryで特定id以外の下にある要素を削除したい
HTMLの制御にjQueryを使用しています。 作業の流れで、#contents以外の要素に存在する特定のクラスを削除したいと思っています。 対象ソースをコンパクトに書くと <body> <div id="contents"> <p class="test">moji</p> </div> <div id="etc"> <p class="test">moji</p> </div> <div id="etc2"> <p class="test">moji</p> </div> </body> というもので、contents以外のetc,etc2にあるclass="test"をremoveしたいのです。 ※cotents以外はidがイロイロ変わるので、「contents以外」でやろうとしています。 jQueryのマニュアルを見ながら、次のようなコードを書きました。 jQuery("*").not("#contents").hasClass("test").removeClass("test"); しかし、実行がうまくいきません。 FireFoxのFireBugで動作を見てみると「functionがない」というメッセージなっています。 jQuery("*").not("#contents").each( function() { jQuery(this).hasClass("test").each( function() { jQuery(this).removeClass("test"); }); }); でも同じ結果でした。 何か良い方法はないでしょうか。
- ベストアンサー
- JavaScript
- 【jQuery】for文ではイベント登録できない？
複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; for(i=0; i<buttonArray.length; i++){ $(buttonArray[i]).click(function(){ $(divArray[i]).animate({width: "0px"}, "slow", "swing"); }); } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; $(buttonArray[0]).click(function(){ $(divArray[0]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[1]).click(function(){ $(divArray[1]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[2]).click(function(){ $(divArray[2]).animate({width: "0px"}, "slow", "swing"); }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか？ ・今回のようなケースの場合、どのように書くのが適切か？ 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- フェイドインしながら移動させたい
下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。 フェイドインしながら移動させるにはどのように書けば良いのでしょうか。 ご教授頂けると非常に助かります。
- 締切済み
- JavaScript
- jcueryのスライドするナビゲーションについて3
http://okwave.jp/qa/q6836508.htmlにて質問させて頂き、 回答者さまから教えてもらった方法で、ナビゲーションを設置いたしました。 デモ http://okwave.xrea.jp/jquery/test6836508/ 単体では問題なく動いたので回答をしめきってしまったのですが、 別のスクリプトによって、 アンカーがURLに読み込まれず、ブラウザの更新ボタンを押すと コンテンツだけが止まったまま スライドはTOPに戻ってきてしまいます。 ※同一ファイル内でのコンテンツ移動です。 どうやら、別で使用している下記のスクリプトのせいで そのようになってしまうようです。 これを外すと、URLにアンカーがつきます。 ただ下記のスクリプトはコンテンツの移動の際に使用しているもので 外すことはできないので、対処法がお分かりの方がおられましたら お教え頂けないでしょうか。 宜しくお願いいたします。 <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); event.preventDefault(); }); }); </script>
- ベストアンサー
- JavaScript
- Jqueryでコンテンツスライダーを設置する
下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 参考サイトには「今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけない」となっており、 参考サイトにあるjqueryのソースを幅1000px（コンテンツスライダー要素全体を囲うブロック要素）のコンテナー内の中央に幅950pxで表示させることは可能でしょうか？ どこを変更すれば、いいのか教えて下さい。 参考サイト http://black-flag.net/jquery/20121219-4407.html
- 締切済み
- JavaScript
お礼
babu_baboo様 回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 すすすすごいです！！！！ 正直にいうと、半分くらい書いてもらったコードが理解出来ていないのですが こまかく調整できて、まさに自分がやりたいことでした。 ありがとうございました！