画像にエフェクト効果を加えるJavaScript「jQuery-puffy」
今回紹介するスクリプトは、画像にエフェクトを加えるJavaScript「jQuery-puffy」です。
ダウンロード
下記から、ファイル一式をダウンロードします。
設置方法
<head></head>内に下記タグを記述し、ファイルを読み込みます。
- <script src="js/jquery-1.3.2.min.js"></script>
- <script src="js/jquery-ui.min.js"></script>
- <script src="js/jquery-puffy.js"></script>
- <script>
- $(document).ready(function(){
- $('#i1').click(function(){$(this).puffy();});
- $('#i2').click(function(){$(this).puffy({duration: 1500});});
- $('#i3').click(function(){$(this).puffy({callback: function(){
- $(this).attr('src', 'img/semooh_chira.gif');
- }});});
- $('#i4').mouseover(function(){$(this).puffy();});
- });
- </script>
あとは、<body></body>内にimgタグを記述し、エフェクトをかけたい画像にidを付与すれば完了です。
- <img id="i1" src="img/semooh_back.gif" width="108" height="206">
- <img id="i2" src="img/semooh_back.gif" width="108" height="206">
- <img id="i3" src="img/semooh_back.gif" width="108" height="206">
- <img id="i4" src="img/semooh_back.gif" width="108" height="206">
以上です。とっても簡単に設置できます。
動作環境・スクリプトエラー報告・対処方法
動作環境 |
---|
エラー・バグ報告 |
不具合対処方 |
修正パッチ |