JQuery 改变 <img> 的色调、饱和度、伽玛？

Posted 2023-05-08

【中文标题】JQuery 改变 <img> 的色调、饱和度、伽玛？

【英文标题】：JQuery change hue, saturation, gamma of <img>?

【发布时间】：2011-05-07 19:01:06

【问题描述】：

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

【参考方案1】：

您尝试过PaintbrushJS 或Pixastic 库吗？

【参考方案2】：

在图像顶部显示和隐藏半透明黑色<div>。

【参考方案3】：

仅使用 JavaScript 无法做到这一点（因为它无法操作二进制文件），但是您可以使用 html5 <canvas> 元素来帮助做到这一点。

Take a look here，有一些图书馆可以提供帮助。

如果你只是想淡化它，改变悬停时的不透明度，例如：

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

【参考方案4】：

我将这个原型放在一起，它使用跨浏览器、仅 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/

【讨论】：

谢谢！我认为这不是可行的答案，因为它不是 JQuery。

如果可以使用 CSS 获得相同的效果，为什么还要使用脚本？无论如何，我现在正在使用它并抽出我发现了这个。如果可以的话，我会再次投票。 :)

【参考方案5】：

你可以在 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。

【讨论】：

这个支持还是很差的。当前的 IE 和 Firefox 仍然不支持它。 Chrome、Safari 和大多数移动浏览器都可以。

这不是跨浏览器兼容的

【参考方案6】：

扩展 Marcelo 的建议，您可以在最后一个较暗的阶段复制您的图像，将其放在原件之上，并像尼克所说的那样在鼠标悬停时改变其不透明度。此方法允许您对图像过渡进行任何操作：更改其色调、饱和度等。 一个简单的Javascript淡入淡出动画代码可以在here找到。