Pixastic 去饱和加载和悬停颜色答案

【问题标题】：Pixastic desaturate on load and colour on hoverPixastic 去饱和加载和悬停颜色
【发布时间】：2012-06-18 15:54:36
【问题描述】：

我有一组图像必须在加载时去饱和并在悬停时显示颜色。我已经尝试过了，但是悬停不起作用，但负载的饱和度降低了：

$(window).load(function () {
        $(".box img").pixastic("desaturate");

        $(".box img").mouseenter(function (e) {
            var self = $(this);
            Pixastic.revert(self); // make it colour
        });

        $(".box img").mouseleave(function (e) {
            // make it black n white again
            $(this).pixastic("desaturate");
        });

 });

我在这里看到了一些其他帖子，但似乎都没有。
我做错了什么？

【问题讨论】：

您似乎在 mouseenter() 函数中使用了不同的大小写（Pixastic 与 pixastic） - 可能是这样吗？

标签： jquery canvas pixastic

【解决方案1】：

Working Demo

// original image
var img = document.getElementById("box");
// desaturated image
var img2 = Pixastic.process(img, "desaturate");

//initial mouseover
img2.onmouseover = function(){fix(img2)};

// mouseout
img.onmouseout = function() {
    // reassign to img2
    img2 = Pixastic.process(img, "desaturate");
    // rebind img2 mouseover
    img2.onmouseover = function(){fix(img2)};
}

// revert
function fix(img) {
    Pixastic.revert(img);
}

可能有更好的方法来做到这一点，但基本上每次您还原或去饱和时，您都会用canvas 元素替换img，反之亦然，这会破坏任何绑定事件。上面所做的是在发生这种情况时重新绑定这些事件中的每一个。

同样可以使用 jQueries .on

【讨论】：