Question

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

Answer 1

您是否尝试过PaintbrushJS或Pixastic库？

Answer 2

在图片顶部显示并隐藏半透明的黑色<div>。

Answer 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 });
});

Answer 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/

Answer 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。

Answer 6

扩展Marcelo的建议，你可以在最后的黑暗阶段获得你的图像的副本，把它放在原始的顶部，并改变其鼠标悬停的不透明度，如尼克所说。此方法允许您对图像转换执行任何操作：更改其色调，饱和度等。可以找到一个简单的Javascript淡入淡出动画代码here。

JQuery改变了<img/>的色调，饱和度，伽玛？

6 个答案: