JQuery thay đổi màu sắc, độ bão hòa, gamma của <img>?

Question

Tôi muốn làm cho hình ảnh tối hơn nếu bạn di chuột qua nó. Có thể thay đổi màu sắc, độ bão hòa hoặc gamma của một img bằng JQuery (hoặc Javascript) không?

Answer 1

Bạn đã thử thư viện PaintbrushJS hoặc Pixastic?

Answer 2

Không thể thực hiện điều này bằng cách sử dụng chỉ JavaScript (vì nó không thể thao tác tệp nhị phân), tuy nhiên bạn có thể thực hiện việc này với yếu tố HTML5 <canvas> để trợ giúp.

Take a look here, có một số thư viện ở đó để trợ giúp.

Nếu bạn chỉ muốn dần giảm âm, thay đổi opacity trên di chuột, ví dụ:

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

Answer 3

Hiển thị và ẩn một nửa trong suốt màu đen <div> trên đầu của hình ảnh.

Answer 4

Mở rộng đề xuất của Marcelo, bạn có thể có một bản sao của hình ảnh trong giai đoạn cuối cùng, tối hơn, đặt nó lên trên bản gốc và thay đổi độ mờ của nó khi di chuột như Nick nói. Phương pháp này cho phép bạn làm bất cứ điều gì với quá trình chuyển đổi hình ảnh: thay đổi màu sắc, độ bão hòa, v.v. Mã hoạt ảnh phai Javascript đơn giản có thể được tìm thấy here.

Answer 5

Bạn có thể làm điều này trong 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); 
} 

Có một loạt các bộ lọc khác như làm mờ, làm ướt, độ tương phản, ...

Bạn có thể easely sử dụng JQuery để thay đổi css nếu bạn muốn.

Answer 6

Tôi đã kết hợp mẫu thử nghiệm này sử dụng một trình duyệt chéo, giải pháp CSS duy nhất để làm tăng độ bão hòa hình ảnh khi di chuột. Có nhiều cách để làm điều đó trong JS/jQuery nhưng hey tại sao không chỉ làm điều đó trong 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;} 

Kiểm tra các DEMO đây và JSfiddle đây

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