2

我在 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;
            }
        }
4

2 回答 2

3

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

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

            }
        }
    });
});
于 2011-08-13T09:21:29.513 回答
0

尝试这样做

$('.photography').live('mouseenter', function(event){
    Pixastic.revert(this);
}).live('mouseleave', function(event){
    Pixastic.process(this, "blurfast", {amount:0.5});
});
于 2011-08-11T18:46:02.330 回答