NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

画像を白黒にしてマウスを乗せた時に元のカラー画像に戻すことができる「jQuery.BlackAndWhite.js」

2014年11月27日jQueryプラグイン活用

画像を白黒にしてマウスを乗せた時に元のカラー画像に戻すことができる「jQuery.BlackAndWhite.js」

CSS3だけでも画像を白黒にすることは可能ですが、こちらのプラグイン「jQuery.BlackAndWhite.js」を使用すると元のカラー画像に白黒にした画像を重ねてコピーしてくれるので便利です。マウスを乗せた時はフェード効果も与えてくれます。通常のローカル環境では白黒の画像は表示されません。

デモページ

JavaScript

(function($){
	$(function(){
		$('#photo a').BlackAndWhite({
			hoverEffect : true,
			speed: {
				fadeIn: 300,
				fadeOut: 600
			}
		});
	});	
})(jQuery);	

HTML

<ul id="photo">
	<li><a href="#"><img src="img01.jpg" width="237" height="156" /></a></li>
	<li><a href="#"><img src="img02.jpg" width="237" height="156" /></a></li>
	<li><a href="#"><img src="img03.jpg" width="237" height="156" /></a></li>
</ul>

CSS

#photo {
	text-align: center;
}
#photo li {
	display: inline-block;
	margin: 0 10px;
}
#photo a {
	position: relative;
	display: block;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 画像を白黒にしてマウスを乗せた時に元のカラー画像に戻すことができる「jQuery.BlackAndWhite.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com