Question

I want to make an image darker if you hover your mouse over it. Is it possible to change the hue, saturation or gamma of an img with JQuery (or Javascript)?

Answer 1

您是否尝试了PaintbrushJS 或。

Answer 2

显示并隐藏着一个半透明的黑色带<><div>,高于图像。

Answer 3

不可能使用只有。 Java本(因为它能够操纵双亲档案),但你可以使用超文本5<代码><canvas>要素提供帮助。

在这里看 ,那里有一些图书馆帮助。

如果你只是想失败,就会改变对 h的不透明性,例如:

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

Answer 4

我将这一使用交叉浏览器的原型汇集在一起,而CSS则只是用来对 h的图像饱和。 The s planty of ways to do it in JS/jQuery but hey why not only do it in 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;}

参看 ,此处和 JSfiddle 。

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

Answer 5

你们可以在国家安全局这样做。

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

还有一些其他过滤器,如bl、饱和、对比......。

如果你想要的话,你可以轻松地利用JQuery来改变 c。

Answer 6

Extending Marcelo s suggestion, you could have a copy of your image in the final, darker stage, put it on top of the original, and vary its opacity on mouse hover like Nick said. This method allows you to do anything with the image transition: change its hue, saturation etc. A simple Javascript fade animation code can be found here.

友情链接