2

カラー画像を白黒のソリッドステートに変換し、jQuery を使用してマウスオーバーでカラー画像に戻すための適切なソリューションがあるかどうか疑問に思っていますか?

ここで説明されているように、CSS メソッドを試しました: Image Greyscale with CSS & re-color on mouse-over? 、しかし、私はそれであまり運がありません。

現在のサイトは次のとおりです: http://frixel.com/wp/ - ギャラリー グリッドに効果を作成しようとしています。

4

3 に答える 3

3

おそらく解決策は、このプラグインを使用することです:

http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

カルーセル付きのデモ: http://interio.tohidgolkar.com/shortcodes/clients-carousel/

于 2013-12-03T11:24:04.393 に答える
0

以下のコードを使用すると、白黒画像にマウスオーバーしたカラー画像を作成するのに役立ちます。

<style>
.blk-white{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
function display_blackwhite(obj) {
$(obj).addClass("blk-white");
}
function display_colorphoto(obj) {
$(obj).removeClass("blk-white");
}
</script>
</head>
<body>
<img src="change-colorphoto-black-white1.jpg" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
<img src="change-colorphoto-black-white2.png" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
于 2016-12-28T10:12:39.830 に答える