Question

有没有人知道如何使用Pixastic插件和jQuery，我可以将图像从颜色淡化到完全去饱和？

我试图避免保存两张图片并淡出一张图片。

Answer 1

我做了相反的...让不饱和的图像淡入颜色。只有1张图像与pixastic和livequery相结合。我基本上克隆了图像，使其中一个副本去饱和，并将它们叠在一起......在悬停时将顶部（去饱和）层褪色。我相信它可以更优雅，但它大部分都有效。您可以在chicagointerhandball.org上看到所有“赞助商”徽标的效果

$('.sponsors').load(function() {    
    $('.sponsors').pixastic("desaturate");
}).each(function(index) {
    var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
    $(this).parent().append(clone);
});

$('.sponsors-color').livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this).hover(function() { 
                $(this).stop().animate({"opacity": 1});
            }, function() { 
                $(this).stop().animate({"opacity": 0});
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    });

Answer 2

由于所有这些像素化的图像效果都是在飞行中产生的，我认为在饱和和去饱和之间淡化是不可行的。在淡入淡出的每一步都必须重新绘制图像的饱和度。你最好的选择可能是有两个图像，一个是饱和的，一个是去饱和的，并将它们放在一起。然后当你将鼠标悬停在一个上时，淡入另一个图像。

修改

刚看到你试图避免有两张图片。嗯，这是我能想到的唯一解决方案，但我很想知道是否有其他解决方案。根据图像的数量，您可以在页面加载时生成所有不饱和图像，将它们放在饱和图像之上，隐藏它们，然后在悬停时淡入它们。只是一种可能性。

Answer 3

通过动态创建复制并使用pixastic去饱和该图像，您可以充分利用这两个世界。将新的去饱和图像放在原稿下并将原稿淡出。

Answer 4

你应该能够，它在jQuery documentation section。

// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");

Answer 5

使用canvas元素看起来像this is possible。

Answer 6

有了这个，您需要混合使用jQuery和标准DOM调用。我今天就此问题也有同样的问题。我无法通过这里给出的示例和他们的网站上的悬停工作跨平台工作。所以我决定自己考虑一下这个问题。想出一个解决方案，希望它适合你：

http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/

使用jQuery和Pixastic降低效果

6 个答案: