0

我有这个部分

    <section ID="Cover">
        <div id="searchEngine">hello</div>
    </section>

我想淡入/淡出封面的背景图像。我正在使用以下功能来做到这一点，但它会淡化整个部分。有没有办法只淡化背景？就像是

$("#Cover").css("background-image").fadeOut();??

（我也是第一次在下面的函数中设置这个图像）

    var imageID=0;
var time=0;
function changeimage(every_seconds)
{
    //change the image
    if(imageID==0)
    {
        $("#Cover").fadeOut(time, function () {
        $("#Cover").css("background-image", "url(images/cover1.jpg)");
        $("#Cover").fadeIn(time);});
        imageID++;
        time=1000;
    }
    else 
    {
        if(imageID==1)
        {
            $("#Cover").fadeOut(time, function () {
            $("#Cover").css("background-image", "url(images/cover2.jpg)");
            $("#Cover").fadeIn(time);});
            imageID++;
        }
        else
        {
            if(imageID==2)
            {
                $("#Cover").fadeOut(time, function () {
                $("#Cover").css("background-image", "url(images/cover3.jpg)");
                $("#Cover").fadeIn(time);});
                imageID++;
            }
            else
            {
                if(imageID==3)
                {
                    $("#Cover").fadeOut(time, function () {
                    $("#Cover").css("background-image", "url(images/cover4.jpg)");
                    $("#Cover").fadeIn(time);});
                    imageID++;
                }
                else
                {
                    if(imageID==4)
                    {
                        $("#Cover").fadeOut(time, function () {
                        $("#Cover").css("background-image", "url(images/cover5.jpg)");
                        $("#Cover").fadeIn(time);});
                        imageID=0;
                    }
                }
            }
        }
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
4

1 回答 1

1

我同意 TrueBlueAussie，如果您使用的是 CSS background-img 而不是这样，它会更容易。这是一个工作示例。

<html>
    <head>
        <style type="text/css">
        #bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
        #mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
        </style>
    </head>
    <body>
        <img src="yourImg.jpg" id="bgImg">
        <section id="mainContent">
            <h2>Your Heading</h2>
            <p>Your content....</p>
            <button id="inBtn">Background Image fade in</button>
            <button id="outBtn">Background Image fade out</button>
        </section>
    </body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>

        /*
            resize function
            From Dave Jay's Blog 
            url: http://davejay.exit42design.com/entry/Design/44/
        */

        function resize(){
            $("#bgImg") 
            .width($(window).width()) 
            .height($(window).width() * .67); 

            if($("#bgImg").height() <= $(window).height()){ 
                $("#bgImg")
                .height($(window).height())
                .width($(window).height() * 1.5);
            }

        }

        $(document).ready(function(){


            resize(); 


            $("#inBtn").on("click",function(){
                $("#bgImg").fadeIn();

            }); 

            $("#outBtn").on("click",function(){
                $("#bgImg").fadeOut();

            }); 

        });

        $(window).resize(function(){ resize(); });

    </script>
</html>
于 2013-09-27T11:50:32.800 回答