JQuery 改变 的色调、饱和度、gamma？

Question

如果将鼠标悬停在图像上，我想让图像变暗。 是否可以使用 JQuery（或 Javascript）更改图像的色调、饱和度或伽玛？

Answer 1

扩展马塞洛的建议，您可以在最后的较暗阶段获得图像的副本，将其放在原始图像的顶部，并像尼克所说的那样在鼠标悬停时改变其不透明度。此方法允许您对图像过渡执行任何操作：更改其色调、饱和度等。
一个简单的 Javascript 淡入淡出动画代码可以在此处找到。

Answer 2

您是否尝试过 PaintbrushJS 或 Pixastic 库？

Answer 3

在图像顶部显示和隐藏半透明的黑色

。

Answer 4

仅使用 JavaScript 无法完成此操作（因为它无法操作二进制文件），但是您可以使用 HTML5 元素来帮助完成此操作。

看看这里，有一些库可以提供帮助。

如果您只想淡出它，请更改悬停时的不透明度，例如：

$("img").css({ opacity: 0.5 }).hover(function() {
  $(this).animate({ opacity: 1 });
}, function() {
  $(this).animate({ opacity: 0.5 });
});

Answer 5

我组装了这个原型，它使用跨浏览器、仅 CSS 的解决方案来在悬停时对图像饱和度进行动画处理。在 JS/jQuery 中有很多方法可以做到这一点，但是为什么不直接在 CSS 中做到呢？

img[class*="filter-resat"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+
    filter: gray; // For IE 6+
    -webkit-filter: grayscale(100%); // for Chrome & Safari

    // Now we set the opacity
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE
    filter: alpha(opacity=40); // Chrome + Safari
    -moz-opacity: 0.6; // Firefox
    -khtml-opacity: 0.6; // Safari pre-webkit
    opacity: 0.6; // Modern

    // Now we set up the transition
    -webkit-transition: all 1.0s ease;
    -webkit-backface-visibility: hidden;
}

img[class*="filter-resat"]:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

// You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;} 

请查看此处的 DEMO 和 JSfiddle 这里

http:// /jsfiddle.net/buttonpresser/x6GfX/show/light/

Answer 6

您可以在 CSS 中执行此操作。

IMG:hover
{
    -ilter: brightness(0.7);
    -webkit-filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -o-filter: brightness(0.7);
    -ms-filter: brightness(0.7);
}

还有许多其他过滤器，例如模糊、饱和度、对比度……

如果需要，您可以轻松使用 JQuery 来更改 css。