ホバー時に様々な効果を付けるjQueryプラグイン「Hoverizr」

ホバー時に様々な効果を付けるjQueryプラグイン「Hoverizr」

jQueryプラグイン「Hoverizr」でロールオーバー効果を付ける方法です。

ダウンロード

こちらからプラグイン「jquery.hoverizr.js」をダウンロードします。

ダウンロード

設置方法

<head>内でjQuery本体とダウンロードした「jquery.hoverizr.js」を読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.hoverizr.js"></script>

続けて以下のように記述すると、ホバー時にグレースケールから元画像に変わるという効果が付きます。

<script type="text/javascript">
$(window).load(function() {
	$('画像のclass名かid名').hoverizr();
});
</script>

オプションで、他の効果を付けることもできます。

<script type="text/javascript">
$(window).load(function() {
	$('画像のclass名かid名').hoverizr({
	オプション1:"値",
	オプション2:"値"
	});
});
</script>
オプション デフォルト値 効果と値
effect "grayscale" グレースケール("grayscale")、色反転("invert")、ぼかし("blur")からエフェクト効果を選択
overlay "top" エフェクト効果を最初に表示するか("top")、ホバー時に表示するか("bottom")
speedIn "slow" フェードインのスピードを「"fast"」、「"slow"」、ミリ秒(1秒=1000)で指定
speedOut "fast" フェードアウトのスピード「"fast"」、「"slow"」、ミリ秒(1秒=1000)で指定

使用例

グレースケールから元画像

<head>
...
<script type="text/javascript">
$(window).load(function() {
	$('.sample img').hoverizr();
});
</script>
...
</head>
<body>
...
<ul class="sample">
<li><img src="images.jpg" /></li>
<li><img src="images.jpg" /></li>
</ul>

元画像からぼかし、ホバーアウトのスピードは遅く

<head>
...
<script type="text/javascript">
$(window).load(function() {
	$('画像のclass名かid名').hoverizr({
	effect:"blur",
	overlay:"bottom",
	speedOut: 'slow'
	});
});
</script>
...
</head>
<body>
...
<ul class="sample">
<li><img src="images.jpg" /></li>
<li><img src="images.jpg" /></li>
</ul>

参考サイト

画像にロールオーバー効果を付けるjQueryプラグイン-Hoverizr | memocarilog

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事