olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(Popup)>
  4. MacのDCみたいな拡大フェードアウト

画像エフェクト(Popup)jquery-puffy.js

MacのDCみたいな拡大フェードアウト

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>jQuery-puffy demo 01</title>
  <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 type="text/javascript">
  $(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/img02.jpg');
		}});});
		$('#i4').mouseover(function(){$(this).puffy();});
  });
  </script>
</head>
<body>
	<div style="cursor: pointer;">
		<img id="i1" src="img/img01.jpg" />
		<img id="i2" src="img/img01.jpg" />
		<img id="i3" src="img/img01.jpg" />
		<img id="i4" src="img/img01.jpg" />
	</div>
</body>
</html>

Macでアイコンをダブルクリックした時のように拡大フェードアウトが可能になるスクリプトです。
画像のみですがアニメーションの調節もでき、オンマウスアクションだけでも動作させることも出来ます。
エフェクト終了後画像を差し替えることも可能です。 

１．ダウンロード/セッティング

サイトへ行きスクリプトの圧縮フォルダをダウンロードしてきてください。
それを解凍したら jquery-puffy.js を demoフォルダ内の jsフォルダへ移動させます。
そしてそのjsフォルダを適当な場所へアップしてください。
（jsファイル格納しているフォルダがあればそこに中身を移すと良いでしょう） 

２．<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 type="text/javascript">
$(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>　

#i1 , #i2 などは画像に付加するID名です。
それらに動作の指定をしています。 

３．HTMLマークアップ

エフェクトを掛けたい画像に先に指定したID名を付けるだけで動作します。

<img id="i1" src="画像のパス" />　

色々試してみてください。

関連スクリプト

感想

問題は使いどころですね。普通のリンクにこのエフェクト付けてもフェードアウト始まる前に移動してしまうので意味ないですし。
Ajaxな動作のトリガー的なリンクに設置したらまだ面白いかもしれませんね。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。