• クリック
  • クリック
  • マウスオーバー

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery-ui.min.js"></script>
<script src="<PATH>/jquery-puffy.js"></script>
<script>
	$(window).load(function(){
		$('#img01').click(function(){
			$(this).puffy();
		});
		$('#img02').click(function(){
			$(this).puffy({duration: 1500});
		});
		$('#img03').mouseover(function(){
			$(this).puffy({duration: 700});
		});
	});
</script>
<ul>
	<li>
		<img id="img01" src="<PATH>/img11.jpg" width="200" height="125" />
		<span>クリック</span>
	</li>
	<li>
		<img id="img02" src="<PATH>/img17.jpg" width="200" height="125" />
		<span>クリック</span>
	</li>
	<li>
		<img id="img03" src="<PATH>/img09.jpg" width="200" height="125" />
		<span>マウスオーバー</span>
	</li>
</ul>

puffyについて

puffyは、画像が飛び出すようなアニメーションを付けることができるプラグインです。
クリック、マウスイベントなどにあわせてセットするとおもしろことができるかも。
ダウンロード こちら
ドキュメント ドキュメントページはありません
デモ デモページはありません
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン

  • lake

    lake

    canvasタグを利用して景色を反射した湖面を再現

  • jPolaroid

    jPolaroid

    普通の画像にポラロイド風の装飾をしてくれる

  • tiltShift

    tiltShift

    画像にミニチュア風に見えるエフェクトをかけられる

  • galleryFocus

    galleryFocus

    マウスオーバーした部分の画像周辺のみをはっきりと表示させる

  • SPOILERALERT

    SPOILERALERT

    、画像や文字をぼかしたりマウスオーバーやクリックでそのぼかしを解除したりできる