要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」
iPhoneでアプリをロングタップしたような動きを実現するjQuery Wiggle pluginです。
sponsors
使用方法
jQuery Wiggle pluginからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.wiggle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.class名').wiggle();
});
</script>
あとは動かしたい画像に対し、classを付与します。
<amp-img src="画像パス" class="class名" />
なお画像以外も適用できますが、いまいちな動きになります。
その他止める、動かすなどは下記のオプションです。
//id="stop"をクリックしたら止める
$('#stop').click(function() {
$('.class名').wiggle('stop');
});
//id="start"をクリックしたら動かす
$('#start').click(function() {
$('.class名').wiggle('start');
});
また、同時に動かす要素の上限数(limit)やdelayも指定できます。
要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」サンプル
sponsors
記事作成:2012年4月24日 10:08
記事URL:http://www.skuare.net/2012/04/jqueryjquery_wiggle_plugin.html
TOP > javascript > 画像関連 > 要素を小刻みに動かすjQueryプラグイン「jQuery Wiggle plugin」
前の記事:Pinterestライクに要素を整列させるjQueryプラグイン「The Wookmark jQuery plugin」
次の記事:スマートフォンでスライダーを利用できる軽量JavaScript「Swipe JS」
あなたにはこちもお勧め!
jQuery プラグインまとめ!