1

読み込み時に彩度を下げ、ホバー時に色を付ける必要がある一連の画像があります。私はこれを試しましたが、ホバーは機能しませんが、ロード時の彩度の低下は機能します:

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

 });

ここで他の投稿を見てきましたが、どれも機能していないようです。
私は何を間違っていますか?

4

1 に答える 1

4

ワーキングデモ

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

おそらくこれを行うためのより良い方法がありますが、基本的に元に戻すか、彩度を下げるたびに、imgcanvas要素に置き換えるか、またはその逆で、バインドされたイベントがすべて破棄されます。上記が行うことは、これが発生したときにこれらの各イベントを再バインドすることです。

おそらくjQueryを使用して同じことを行うことができます.on

于 2012-06-18T20:46:29.967 に答える