JQuery изменить оттенок, насыщенность, гамму <img>? - PullRequest
Новая
       21

JQuery изменить оттенок, насыщенность, гамму <img>?

9 голосов
/ 10 ноября 2010

Я хочу сделать изображение темнее, если навести на него курсор мыши.Можно ли изменить оттенок, насыщенность или гамму изображения с помощью JQuery (или Javascript)?

Ответы [ 6 ]

11 голосов
/ 10 ноября 2010

Вы пробовали PaintbrushJS или Pixastic библиотека?

10 голосов
/ 10 ноября 2010

Показать и скрыть полупрозрачный черный <div> поверх изображения.

6 голосов
/ 10 ноября 2010

Невозможно сделать это, используя только JavaScript (поскольку он не может манипулировать двоичными файлами), однако вы можете сделать это с помощью элемента HTML5 <canvas>, чтобы помочь.

Взгляните сюда , есть несколько библиотек, которые могут помочь.

Если вы просто хотите уменьшить его, измените непрозрачность при наведении, например: 

$("img").css({ opacity: 0.5 }).hover(function() {
  $(this).animate({ opacity: 1 });
}, function() {
  $(this).animate({ opacity: 0.5 });
});
5 голосов
/ 24 мая 2013

Я собрал этот прототип, который использует кросс-браузерное решение, предназначенное только для 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/

4 голосов
/ 18 мая 2013

Вы можете сделать это в 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, если хотите.

2 голосов
/ 15 ноября 2011

Расширяя предложение Марсело, вы можете получить копию своего изображения на последнем, более темном этапе, поместить его поверх оригинала и изменить его непрозрачность при наведении курсора мыши, как сказал Ник.Этот метод позволяет вам делать с переходом изображения все что угодно: изменять его оттенок, насыщенность и т. Д. Простой анимационный код исчезновения Javascript можно найти здесь .

...