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

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

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(アクション)>
  4. 様々なエフェクトで画像置換

画像エフェクト(アクション)jquery-1.3.2.min.js

様々なエフェクトで画像置換

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='Groject.ImageSwitch.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
	$("ul#Trigger li a").click(function(){ 
		$("#Img").ImageSwitch({Type:$(this).attr("class"), 
			NewImage:$(this).attr("rel")
			});
	});
});
 
</script>
</head>

<body>

<img id="Img" src="1.jpg">
<ul id="Trigger">
  <li><a href="#" rel="2.jpg" class="FadeIn">FadeIn</a></li>
  <li><a href="#" rel="3.jpg" class="FlyIn">FlyIn</a></li>
  <li><a href="#" rel="4.jpg" class="FlyOut">FlyOut</a></li>
  <li><a href="#" rel="5.jpg" class="FlipIn">FlipIn</a></li>
  <li><a href="#" rel="6.jpg" class="FlipOut">FlipOut</a></li>
  <li><a href="#" rel="7.jpg" class="ScrollIn">ScrollIn</a></li>
  <li><a href="#" rel="8.jpg" class="ScrollOut">ScrollOut</a></li>
  <li><a href="#" rel="2.jpg" class="SingleDoor">SingleDoor</a></li>
  <li><a href="#" rel="3.jpg" class="DoubleDoor">DoubleDoor</a></li>
</ul>

</body>
</html>

フェードやスライド、フライインなど様々なエフェクトを付けて画像置換できるスクリプト Groject.ImageSwitch.js。
jQueryを使用します。
メニューなどのナビゲーション画像には使いにくいかも知れませんが、
画像を簡易的に見せたいコンテンツには、にぎやかになってピッタリかもしれません。

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

まず jQuery をダウンロードし、次に Groject.ImageSwitch.js をダウンロードします。
完了したらそれらを適当な場所へアップロード。

２．<head>設定

アップしたスクリプトを読み込ませます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.js"></script>

次に画像置換の設定を書き込みます。

<script type="text/javascript">
$(document).ready(function(){
    $("ul#Trigger li a").click(function(){

        $("#Img").ImageSwitch({Type:$(this).attr("class"),

            NewImage:$(this).attr("rel")

            });
    });
});   </script>

ul#Trigger li a の部分にトリガーとなる要素に付けるID名を記述しますが、
複数設置したい場合は、サンプルのように子孫セレクタで指定すると良いでしょう。
#Img 部分は、ターゲットとなる画像に付けるID名です。

３．HTMLマークアップ

まず画像置換のターゲットになる画像を記述します。

<img id="Img" src="1.jpg">

ここには<head>で設定したIDをつけるのを忘れないようにしてください。
次にトリガー要素を記述します。

<ul id="Trigger">
  <li><a href="#" rel="2.jpg" class="FadeIn">FadeIn</a></li>
</ul>

ul要素に<head>で指定したIDを付け、トリガーとなる a要素を記述します。
rel属性に画像置換したい画像のパスを記述し、class属性にエフェクトに種類を記述します。
エフェクトの種類は以下の９種類です。

  1. FadeIn
  2. FlyIn
  3. FlyOut
  4. FlipIn
  5. FlipOut
  6. ScrollIn
  7. ScrollOut
  8. SlingleDoor
  9. DoubleDoor

好みに合わせて設定すると良いと思います。

関連スクリプト

感想

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

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

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