驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」

画像の切り替えでユーザーに驚かせることができそうです。
jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。
驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」サンプル

使用方法
Jquery.ImageSwitchからGroject.ImageSwitch.jsを、jQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.js"></script>
<script>
$(document).ready(function(){
$("#id名").click(function(){ //切り替えるときのボタンid
$(".Slash").ImageSwitch({Type:$(this).attr("class"),
NewImage:$(this).attr("rel"),
Direction:"DownTop" //動き通常は左右
});
});
});
</script>

あとは元画像と切り替えボタンを以下のように書き込みます。
<img src="/test/img/slash1.jpg" alt="Slash" class="Slash"/>
<p id="demo" rel="切り替え画像パス">テキスト</p>

なお動きはサンプルのようなものがあります。

驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」サンプル

sponsors

「驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」」をシェアする

記事作成:
記事URL:

TOP > > > 驚きの画像切り替え!jQueryプラグイン「Jquery.ImageSwitch」