JQuery改变的色调,饱和度,伽玛?
如果将鼠标hover在图像上,我想让图像变暗。 是否可以使用JQuery(或Javascript)更改img的色调,饱和度或灰度系数?
你尝试过PaintbrushJS或Pixastic库吗?
在图像顶部显示和隐藏半透明的黑色
。
不能仅使用JavaScript(因为它无法操作二进制文件)来执行此操作,但是您可以使用HTML5 元素来帮助完成此操作。
看看这里 ,有一些图书馆可以提供帮助。
如果您只是想淡化它,请在hover时更改不透明度,例如:
$("img").css({ opacity: 0.5 }).hover(function() { $(this).animate({ opacity: 1 }); }, function() { $(this).animate({ opacity: 0.5 }); });
我把这个原型放在一起,使用跨浏览器,仅限CSS的解决方案来设置hover时的图像饱和度。 在JS / jQuery中有很多方法可以做到这一点但是嘿,为什么不在CSS中做呢?
img[class*="filter-resat"] { filter: url("data:image/svg+xml;utf8,#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,#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
你可以用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); }
还有一堆其他filter,如模糊,饱和,对比,……
如果需要,您可以轻松使用JQuery来更改css。
扩展Marcelo的建议,你可以在最后的较暗阶段获得你的图像的副本,把它放在原始的顶部,并改变其鼠标hover的不透明度,如尼克说。 此方法允许您对图像转换执行任何操作:更改其色调,饱和度等。可以在此处找到简单的Javascript淡入淡出动画代码。