画像に手軽にマウスオーバー効果を付けられるJavaScript「Hoverizr」

画像のマウスオーバーをひとつひとつ作るのは面倒に思う時があります。
そんな時はjQUeryプラグインのHoverizrを利用するのも手段のひとつでしょう。

使用方法

Hoverizrからjquery.hoverizr.jsをjqueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.hoverizr.min.js"></script>
<script>
$(function(){
	 $(".class名").hoverizr({
	 	speedIn: "fast", //イン速度 ミリ秒指定も可
	 	speedOut: "slow", //アウト速度 ミリ秒指定も可
	 	effect:"blur" //エフェクト（"grayscale", "invert", "blur")
	 });
});
</script>

あとは上記classを振れば完成です。
<img src="画像パス" class="class名">

サンプル

Javascriptサンプルページ一覧

skuare.net