一覧へ戻る

画像にエフェクト効果を加えるJavaScript「jQuery-puffy」

今回紹介するスクリプトは、画像にエフェクトを加えるJavaScript「jQuery-puffy」です。

デモページはこちらから

ダウンロード

下記から、ファイル一式をダウンロードします。

ダウンロードはこちら

設置方法

<head></head>内に下記タグを記述し、ファイルを読み込みます。

  1. <script src="js/jquery-1.3.2.min.js"></script>  
  2. <script src="js/jquery-ui.min.js"></script>  
  3. <script src="js/jquery-puffy.js"></script>  
  4. <script>  
  5. $(document).ready(function(){  
  6.         $('#i1').click(function(){$(this).puffy();});  
  7.         $('#i2').click(function(){$(this).puffy({duration: 1500});});  
  8.         $('#i3').click(function(){$(this).puffy({callback: function(){  
  9.             $(this).attr('src', 'img/semooh_chira.gif');  
  10.         }});});  
  11.         $('#i4').mouseover(function(){$(this).puffy();});  
  12.   });  
  13. </script>  

あとは、<body></body>内にimgタグを記述し、エフェクトをかけたい画像にidを付与すれば完了です。

  1. <img id="i1" src="img/semooh_back.gif" width="108" height="206">  
  2. <img id="i2" src="img/semooh_back.gif" width="108" height="206">  
  3. <img id="i3" src="img/semooh_back.gif" width="108" height="206">  
  4. <img id="i4" src="img/semooh_back.gif" width="108" height="206">  

以上です。とっても簡単に設置できます。

動作環境・スクリプトエラー報告・対処方法

動作環境
 
エラー・バグ報告
 
不具合対処方
 
修正パッチ