Question

我有一组图像，在悬停时必须在负载和颜色上去饱和。我已经尝试了这个，但是悬停不起作用，但它在加载时会出现去饱和状态：

$(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");
        });

 });

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

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

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

可以使用jQueries .on

完成相同的操作

在悬停时，载荷和颜色上的Pixastic去饱和

1 个答案: