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

画像に手軽にマウスオーバー効果を付けられる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「Hoverizrサンプル

sponsors

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

記事作成:
記事URL:

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