javascript - 使用 Pixastic 和 .live 处理一类图像

Question

我在 JavaScript 中使用 Pixastic 插件。我有一张 table ，上面摆满了模糊的图像。当我用鼠标经过它们时，我希望它们恢复正常。当鼠标离开图像时，我希望它模糊回来。出于某种原因，我的代码不起作用。这是代码:

之前，我复制了错误的代码部分，很抱歉，我要问的是这一段。

<script type="text/javascript">
    $(document).ready(function(){
        $('.photography').live('mouseover mouseout', function(event) {
            if (event.type == 'mouseover') {
                function () {Pixastic.revert('this');};
            }
            else {
                function(){Pixastic.process('this', "blurfast", {amount:0.5});};
            }
        });
    });
</script>

好的，所以我设法找到了我的旧代码，它实际上工作了一半(当我第一次将鼠标悬停在图像上时它工作，但是当我第二次尝试时它没有)。

$(document).ready(function(){
    var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
    var unblur = function () {Pixastic.revert(this);};
    $('.photography').each(blur);
    $('.photography').hover(unblur,blur);
});

好的，现在我还要为名为 revert 的函数添加代码:

revert : function(img) {
    if (Pixastic.Client.hasCanvas()) {
        if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
            img.width = img.__pixastic_org_width;
            img.height = img.__pixastic_org_height;
            img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);

            if (img.parentNode && img.parentNode.replaceChild) {
                img.parentNode.replaceChild(img.__pixastic_org_image, img);;
            }
            return img;
        }
    }
    else
        if (Pixastic.Client.isIE()) {
            if (typeof img.__pixastic_org_style != "undefined")
                img.style.cssText = img.__pixastic_org_style;
            }
        }

Answer 1

所以昨天我的 friend 发现了如何做到这一点......问题是插件将图像转换为 Canvas 无论如何她的代码:

$(document).ready(function(){

    $('.pic').each(function(){
        this.onmouseout = function(){
            var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
            canvas1.onmouseover = function(){
                Pixastic.revert(this);

            }
        }

        this.onload = function(){
            var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
            canvas.onmouseover = function(){
                Pixastic.revert(this);

            }
        }
    });
});