on良かったらフォローお願いします。】3回にわたり画像などの要素を小刻みに振動(Wiggle)させるjqueryプラグインを紹介している。plugin」)、「jRumble」の3つ。3回目として、個人的には当ブログにwiggle用にjqueryプラグインを設置するならこれかなと思っている「jRumble」を紹介したい。設置方法が簡単でカスタマイズが豊富でいてわかりやすいのが魅力的だ。「jRumble」は、version1.0の解説が多く見られる。現在(2014年2月5日)は、version1.3となっており設定方法が変更されているので注意が必要。clickでの振動(wiggle)のスタート/ストップにtoggleメソッドが利用されており、jQuery1.9以降では、ホームページに記載されているサンプルそのままでは動作しない。作者にDiscussion欄から問い合わせたところ回答があったのでそちらで記載している。ホームページこちらがjRumbleのホームページ。左側の「Download」からzipファイルをダウンロードできる。GitHubのダウンロードページで右下の「DownloadZIP」からもダウンロードできる。ダウンロードファイル:jquery.jrumble.1.3.zip必要ファイルは解凍したフォルダの中にあるjquery.jrumble.1.3.min.jsファイルだけなので、これをサーバーにアップロードする。必要ファイル:jquery.jrumble.1.3.min.js設定方法とデモjRumbleの基本動作とオプション基本構造として初期化とオプション設定を$('#rumble-element').jrumble();トリガーとスタート設定を$('#rumble-element').trigger('startRumble');トリガーとストップ設定を$('#rumble-element').trigger('stopRumble');で行っている。オプション設定とそのデフォルトは、以下のとおり。トリガー(trigger)としてはデフォルトが「hover」(マウスが乗っている場合)で、その他に「click」、「mousedown」(マウスを押している場合)、「constant/timeout」(時間設定)が用意されている。jQuery本体とjsファイルの呼び出しの設定jQuery本体とjRumbleのjsファイルを呼び出す設定をする。ヘッダー部分(<head>と</head>の間)に以下のように記載する。APIのホスティングを利用している。上記に続けて、ヘッダー部分(<head>と</head>の間)に以下のように記載する。クラスやID指定は自分のわかりやすいものでよい。今回はデモ用にID指定で「#jr○-○」のようにしている。-->なお、デモ全ての動作を記載している。ひとつのデモだけの場合は、次のように切り取って記載する。例として上のハイライトした「デモ1default設定」だけにする場合。-->表示(wiggle)したい部分の記載ボディ部分(<body>と</body>の間)に以下のように記載する。下のデモ表示と同じように記載してみた。style="clear:both;"></div>デモ用cssの設定divボックスを用意してデモを表示しているので、参考のために示す。ヘッダー部分(<head>と</head>の間)に以下のように記載する。toggleメソッド元々の作者のサンプルはトリガー(trigger)が「click」の場合、toggleメソッドを利用してスタート/ストップを切り替えているので、念のため、そのまま利用して設置する場合を示しておく。Migrate」も最初に読み込めば使える。ホスティングも利用できるので、以下のようにjQuery本体と一緒に読み込めばよい。上記に続けて、ヘッダー部分(<head>と</head>の間)とボディ部分(<body>と</body>の間)の設置したい場所へ以下のように記載する。Migrate」を利用してtoggleメソッドでクリックにしたのがこれ。これで3回目となるwiggle動作のjqueryプラグイン「jRumble1.3」の紹介はおわり。jqueryプラグイン3選-その2「ClassyWiggle」もあわせてどうぞ。スポンサーリンクレクタングル(大)広告もし良ければお願いします。良かったらフォローお願いします。画像をクルクル回転させたり、傾けたりできるJqueryプラグインjqueryrotateの設置マウス(カーソル)が乗っかるとクルっと回転したりするアイコンを見かける。今回は、「Lightbox」で有名な画像をモーダルウィンドウで表示する定番の画像用Jqueryプラグインを紹介する。前回、JavaScriptだけで雪を降らせる「Snowstorm」をクリスマスシーズンなので、ブログやサイトに雪を降らせるSnowstorm...記事を読むTumblrのカスタマイズ-TumblrにJqueryプラグインや画像などのファイルをアップロードして使う方法Tumblrでは、テーマのカスタマイズに必要なファイルに限ってアップロードすることができる。コメントをキャンセルメールアドレスが公開されることはありません。*サイト人気の記事まだデータがありません。Widget人気の記事まだデータがありません。Profileメインブログでは、WordPressやTwitterその他好きなことを記事にしています。そのほか2ちゃんまとめサイトやubuntuなどのブログもぽちぽちやってます。JUMP-UP.INFO。