JQuery, <img>'un tonunu, doygunluğunu, doygunluğunu değiştiriyor mu?

Question

Farenizi üzerine getirdiğinizde görüntüyü koyulaştırmak istiyorum. Bir img'in tonunu, doygunluğunu veya gamasını JQuery (veya Javascript) ile değiştirmek mümkün mü?

Answer 1

PaintbrushJS veya Pixastic kitaplığını denediniz mi?

Answer 2

yalnızca JavaScript'i (bu ikili dosyaları değiştiremediği için) kullanarak bunu yapmak mümkün değildir, ancak bunu yapmak için HTML5 <canvas> öğesinde bunu yapabilirsiniz.

Take a look here, yardım için bazı kütüphaneler var.

sadece örneğin, o solmaya Üzerine giderek saydamlığını değiştirmek isterseniz

:

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

Answer 3

göster ve görüntünün üstünden <div> yarı saydam siyah gizler.

Answer 4

Marcelo'nun önerisini genişleterek, resminizin son, daha karanlık aşamasında bir kopyasına sahip olabilir, orijinalin üzerine yerleştirebilir ve Nick'in belirttiği gibi fare durağındaki opaklığını değiştirebilirsiniz. Bu yöntem, görüntü geçişi ile herhangi bir şey yapmanıza izin verir: tonunu, doygunluğunu vb. Değiştirir. Basit bir Javascript solmaz animasyon kodu here bulunabilir.

Answer 5

Sen

İsterseniz css değiştirmek için kullanılması JQuery easely ... 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); 
} 

bulanıklık, doyurmak, kontrast gibi diğer filtrelerin de birkaç tane var yapabilirsiniz.

Answer 6

Vurguluda görüntü doygunluğunu hareketlendirmek için çapraz tarayıcı, yalnızca CSS çözümü kullanan bu prototipi bir araya getirdim. JS/jQuery'de yapmanın bir yolu var ama hey neden sadece CSS'de yapmıyorsunuz?

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

burada DEMO dışarı Kontrol ve burada JSfiddle Bu hala çok kötü desteği vardır

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