Question

我在JavaScript中使用Pixastic插件。我的桌子上摆满了模糊的图像。当我用鼠标检查它们时，我希望它们正常。当鼠标离开图像时，我希望它能够模糊回来。出于某种原因，我的代码不起作用。这是代码：

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

<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

所以昨天我的朋友发现了如何做到这一点......问题是插件将图像转换为画布，无论如何她的代码是：

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

            }
        }
    });
});

Answer 2

尝试这样做

$('.photography').live('mouseenter', function(event){
    Pixastic.revert(this);
}).live('mouseleave', function(event){
    Pixastic.process(this, "blurfast", {amount:0.5});
});

使用Pixastic和.live与一类图像

2 个答案: