jquery - 20 秒后淡化带有图像横幅的图像部分

Question

我在 20 秒后使用 fadeIn 和 fadeOut 旋转背景图像。 图像在左上角包含 Logo ，在右侧从上到下包含人物图像，现在问题是图像应使用淡入淡出和淡入淡出旋转，但左上角的 Logo 不应具有淡入和淡出效果(不应有效果的变化)。

所以我的问题是如何只淡化一张背景图片的一部分，而其他部分不应该淡化(或看不到)

我当前工作的 jquery 代码

    $("DIV#background IMG").eq(0).fadeIn(1000, function(){
        setTimeout("changeBackground(0)",20000);
    });

    changeBackground = function (i){
        curr_index = i;
        //alert(curr_index);
        nex_index = ((i + 1) > 3 ) ? 0 : i + 1;
        //alert(nex_index); 
        $("DIV#background IMG").fadeOut(1000)
        $("DIV#background IMG").eq(nex_index).fadeIn(1000, function(){
            setTimeout("changeBackground(nex_index)",20000);
        });
    }

注意:以上代码正确且运行成功

谢谢。

Answer 1

有一个用于循环图像的 jquery 插件。 jQuery Cycle . 将所有图像放在同一个容器元素中并对其调用 cycle()。

该插件将一张图片直接叠加在另一张图片上，因此如果您的图片的 Logo 部分始终停留在同一位置，您将不会注意到它正在褪色。

另一个想法是将您的 Logo 放在单独的(透明 .png)图像中，并使用 position:absolute 将其设置为旋转图像顶部的正确位置。