[JS]マウスオーバーでカラー画像を白黒にできるjQueryプラグイン「jQuery.BlackAndWhite」
スポンサード
HTML 側ですが、画像を表示させる場所で以下のような記述をします。
<head>タグ内に記述するJavascript は以下のようになり、「白黒→カラー」の場合は
スポンサード
カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグイン「jQuery.BlackAndWhite」について、設置方法と簡単なデモをご紹介します。
目次
jQuery.BlackAndWhite のダウンロード
以下のページより、jQuery.BlackAndWhite のファイルを一式ダウンロードします。jQuery.BlackAndWhite の設置
ダウンロードしたBlackAndWhite.css ファイルと、jquery.BlackAndWhite.js、jqueryファイルを<head>内に設置します。1 2 3 4 5 | <head> <link href="./BlackAndWhite.css" rel="stylesheet"> <script src="./jquery.min.js"></script> <script src="./jQuery.BlackAndWhite.js"></script> </head> |
マウスオーバー時に「カラー→白黒」で表示
まずはカラーの画像を、マウスオーバーで白黒に切り替えます。HTML 側ですが、画像を表示させる場所で以下のような記述をします。
1 2 3 4 5 6 7 8 | <ul> <li><a href="#" class="bwWrapper"><img src="./imgaes01.jpg" /></a></li> <li><a href="#" class="bwWrapper"><img src="./imgaes02.jpg" /></a></li> <li><a href="#" class="bwWrapper"><img src="./imgaes03.jpg" /></a></li> <li><a href="#" class="bwWrapper"><img src="./imgaes04.jpg" /></a></li> <li><a href="#" class="bwWrapper"><img src="./imgaes05.jpg" /></a></li> <li><a href="#" class="bwWrapper"><img src="./imgaes06.jpg" /></a></li> </ul> |
続いて、<head>タグ内に以下のJavascript の記述を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> $(function(){ $('.bwWrapper').BlackAndWhite({ hoverEffect : true, webworkerPath : false, invertHoverEffect: true, intensity:1, speed: { fadeIn: 200, fadeOut: 800 }, onImageReady:function(img) { } }); }); </script> |
HTML 側のbwWrapper
クラスのリンクタグに対して、マウスオーバーによる画像切り替えを有効にする場合は、hoverEffect
をtrue
にします。
また、「カラー→白黒」への切り替えの場合はinvertHoverEffect
をtrue
にします。
speed
は「カラー→白黒」へ切り替わる際の速度です。必要に応じてfadeIn
fadeOut
の値をそれぞれ調整します。
↓jQuery.BlackAndWhiteでカラーを白黒に切り替えるデモはこちらです。
「カラー→白黒」のデモ
マウスオーバー時に「白黒→カラー」で表示
jQuery.BlackAndWhite は「カラー→白黒」だけではなく「白黒→カラー」への切り替えも可能です。<head>タグ内に記述するJavascript は以下のようになり、「白黒→カラー」の場合は
invertHoverEffect
をfalse
にします。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> $(function(){ $('.bwWrapper').BlackAndWhite({ hoverEffect : true, webworkerPath : false, invertHoverEffect: false, intensity:1, speed: { fadeIn: 200, fadeOut: 800 }, onImageReady:function(img) { } }); }); </script> |
↓jQuery.BlackAndWhiteで白黒をカラーに切り替えるデモがこちらです。
「白黒→カラー」のデモ
スポンサード
コメント