在css/javascript中单击，切换图像上的去饱和度

Toggle Desaturation on image onClick in css / javascript

本文关键字：图像 饱和度 css javascript 单击      更新时间：2023-09-26

每个函数都有更多的代码，但我相信这些是与我的问题有关的主线。。。这是从一个家伙库去饱和的图像基本上滚动。

如何将其更改为单击，而不是鼠标悬停/滚动？这是他的密码。。。

jQuery(function($){
$cloned.closest(".DesaturateDiv").bind("mouseenter mouseleave",desevent);
}
  function desevent(event) 
  {
    if (event.type == 'mouseenter')
         $(".des.color", this).fadeOut(275);
    if (event.type == 'mouseleave')
        $(".des.color", this).fadeIn(200);
  }

我已经尝试过将if语句更改为jquery切换，并将最上面的一行从.bind（"mouseenter-moseleave"，desevent）更改为。。。到.bind（"toggle"，desevent），它仍然不起作用。我的问题基本上是如何将mouseenter和mouseleave替换为onClick，这样图像在onClick上会去饱和，然后在onClicks上再次饱和。这是我输入的切换代码，而不是上面的两个if，只是以防万一。

$('.DesaturateDiv').toggle(function() {
$(".des.color", this).fadeOut(275);
}, function() {
$(".des.color", this).fadeIn(200);
});

此外，在一个相关的问题上，你能用css3做到这一点吗？这是用css3…去饱和图像的代码

 img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

所以我的问题是如何做到这一点？

我尝试了img。desaturate:active｛｝，但它不起作用？

编辑：我试过了，觉得我需要一些类似的东西，但我确信语法不正确，有帮助吗？？

 function desevent(event) 
  {
    i = 0;
    if( i = 0 ){
    if (event.type == 'mousedown')
         $(".des.color", this).fadeOut(275);
         i = 1;
    }
    if( i = 1 ){
    if (event.type == 'mousedown')
        $(".des.color", this).fadeIn(200);
                     i = 0;
    }
  }

只需向单击的元素添加一个特定的类。

.desaturate{
    transition-duration: 400ms; //and other prefixes
}
.desaturate.active{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}
相关文章：