マウスを置いてみやがれぃ
クリックしてみやがれぃ
マウスをクリックしたままにしやがれぃ
クリックでカウントダウンしやがれぃ
10

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.jrumble.1.3.min.js"></script>
<script>
	$(window).load(function(){
		$('#jRumbleDemo01').jrumble({x: 2, y: 2 ,rotation: 1});
		$('#jRumbleDemo02').jrumble({x: 9, y: 9 ,rotation: 4});
		$('#jRumbleDemo03').jrumble({x: 7, y: 0 ,rotation: 1});
		$('#jRumbleDemo04').jrumble({x: 0, y: 5 ,rotation: 0});
		
		$('#jRumbleDemo01').hover(function(){
			$(this).trigger('startRumble');
		}, function(){
			$(this).trigger('stopRumble');
		});
		
		$('#jRumbleDemo02').toggle(function(){
			$(this).trigger('startRumble');
		}, function(){
			$(this).trigger('stopRumble');
		});
		
		$('#jRumbleDemo03').bind({
			'mousedown': function(){
				$(this).trigger('startRumble');
			},
			'mouseup': function(){
				$(this).trigger('stopRumble');
			}
		});
		
		$('#jRumbleDemo04').on({
			'click.jRumbleDemo04': function(){
				if($(this).find('span').html() <= '1') {
					$(this).trigger('startRumble');
					$(this).find('span').remove();
					$(this).html('あぁああぁっっぁぁああー').css('padding-top', '40px');
					$(this).off('.jRumbleDemo04');
					$('#jRumbleDemo04:hover').css('cursor', 'default');
				} else {
					$(this).find('span').html($(this).find('span').html()-1);
				}
			},
			'mousedown.jRumbleDemo04': function(){
				$(this).css('opacity', '0.6');
			},
			'mouseup.jRumbleDemo04': function(){
				$(this).css('opacity', '1');
			}
		});
	});
</script>
<div id="jRumbleDemo01" class="jRumble-demo">マウスを置いてみやがれぃ</div>
<div id="jRumbleDemo02" class="jRumble-demo">クリックしてみやがれぃ</div>
<div id="jRumbleDemo03" class="jRumble-demo">マウスをクリックしたままにしやがれぃ</div>
<div id="jRumbleDemo04" class="jRumble-demo">クリックでカウントダウンしやがれぃ<br /><span>10</span></div>

jRumbleについて

jRumbleはふるえます。とにかくふるえるプラグインです。 ふるえいた人必見。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • lodaButton

    lodaButton

    lodaButtonは、アニメーションアイコン付きのボタンを設置できる

  • glassyWorms

    glassyWorms

    背景にミミズをはわせる

  • PercentageLoader

    PercentageLoader

    とてもきれいにロード内容をパーセント表示してくれる

  • Wookmark

    Wookmark

    不揃いな要素たちをきれいにタイル上に敷き詰めてくれる

  • HoverCaptions

    HoverCaptions

    HoverCaptionsは、Hover時に色々なパターンでキャプションを表示できる