on良かったらフォローお願いします。今回から3回にわたり画像などの要素を小刻みに振動(Wiggle)させるjqueryプラグインを紹介する。plugin」)、「jRumble」の3つ。Vibrate」を紹介する。このところ「toggle」「wiggle」「QRcode」と小技的なjqueryプラグインを紹介するために数多くの記事を見てきたが、理解して自分の望むように動かすまでにプログラムがわかってる人にはおそらく何でもないことで結構つまずいた。私のようにわからない人が理解し利用しやすい記事にするよう心がけたいと思う。要素を振動(wiggle)させるプラグインは名前も似たようなものが非常に多い。似た名前の違うプラグインだと動作のさせ方が違ったりするので注意して欲しい。Vibrateのホームページ。now」のフォルダ画像をクリックするとダウンロードできる。ダウンロードファイル:jquery.vibrate.zip必要ファイルは解凍したフォルダの中にあるjquery.vibrate.min.jsファイルだけなので、これをサーバーにアップロードする。Vibrateの基本動作とオプションデフォルトの$('要素').vibrate()でマウスオーバーで振動を始め、マウスアウトで振動を止める。オプションとして、トリガーに「mouseover」のほかに「focus」(通常、要素がマウスオーバーやクリックなどで、フォーカスされた場合動作を開始する)が用意されている。その他振動速度、最初から振動、マウスオーバーで要素のクラスを変える等が用意されている。jQuery本体とjsファイルの呼び出しの設定jQuery本体とjquery.qrcodeのjsファイルを呼び出す設定をする。ヘッダー部分(<head>と</head>の間)に以下のように記載する。APIのホスティングを利用している。上記に続けて、ヘッダー部分(<head>と</head>の間)に以下のように記載する。-->上のように説明をつけて、複数行にわたってscriptを記載するとchromeやfirefoxでは特に問題ないのに何故かIEで動作しなかった。念のため、デフォルトを省略し、かつ、1行にまとめたものを記載しておく。これだとIEでも問題なく動作する。-->なお、デモ全ての動作を記載している。ひとつのデモだけの場合は、次のように切り取って記載する。例として上のハイライトした「デモ2左」だけにする場合。-->IEも考慮してデフォルトを省略すると実はこれだけ。-->デモ用cssの設定divボックスを用意してデモを表示しているので、参考のために示す。ヘッダー部分(<head>と</head>の間)に以下のように記載する。-->表示(wiggle)したい部分の記載ボディ部分(<body>と</body>の間)に以下のように記載する。Vibrate」の紹介はおわり。jqueryプラグイン3選-その3「jRumble1.3(最新版)」もあわせてどうぞ。スポンサーリンクレクタングル(大)広告もし良ければお願いします。良かったらフォローお願いします。記事の中にリンクがある場合、クリックするのを躊躇する人もいると思う。画像や指定範囲(divBOX)をフリップさせたい。コメントをキャンセルメールアドレスが公開されることはありません。*サイト人気の記事まだデータがありません。Widget人気の記事まだデータがありません。Profileメインブログでは、WordPressやTwitterその他好きなことを記事にしています。そのほか2ちゃんまとめサイトやubuntuなどのブログもぽちぽちやってます。JUMP-UP.INFO。