JQuery改变色相，饱和度，gamma的<img>？

Question

如果将鼠标悬停在图像上，我想使图像变暗。 是否有可能通过JQuery（或Javascript）改变img的色调，饱和度或伽马值？

Answer 1

您是否试过PaintbrushJS或Pixastic库？

Answer 2

这是不可能做到这一点使用仅 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 3

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

Answer 4

扩展马塞洛的建议，你可以有你的图像的副本在决赛中，较暗的阶段，把它放在原来的顶部，并改变其不透明度鼠标悬停像尼克说。此方法允许您对图像转换进行任何操作：更改其色调，饱和度等。 可以找到一个简单的Javascript淡入淡出动画代码here。

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

还有其他过滤器一样模糊，饱和，相比之下，一帮做这个...

您可以easely使用jQuery，如果你想改变的CSS。

Answer 6

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