0

我整天都在试图弄清楚这一点，并继续绕圈子跑。我有两个问题希望得到帮助。首先：我有一个在 div 内显示的 jquery 背景幻灯片。问题是，当背景淡出以引入新图像时，DIV 的子代也是如此，我不希望这样。您可以在我的网站上看到它如何隔离父 DIV 以使子 DIV 也不会淡出？这是幻灯片的代码：

<script language="JavaScript" type="text/javascript">  
    $(document).ready(function(){    
        var imgArr = [ // relative paths of images  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/1.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/2.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/3.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/4.jpg' 
        ];    

    var preloadArr = [];  
    var i;    

    /* preload images */ 

    for(i=0; i < imgArr.length; i++){  
        preloadArr[i] = new Image();  
        preloadArr[i].src = imgArr[i];  
    }    

    var currImg = 1;  
    var intID = setInterval(changeImg, 6000);    

    /* image rotator */ 

    function changeImg(){  
        $('#centerdiv').animate({opacity: 0}, 1000, function(){  
            $(this).css('background','url(' + 
                preloadArr[currImg++%preloadArr.length].src +') center fixed no-repeat');  
        }).animate({opacity: 1}, 1000);
        $('#centerdiv').css({'background-size': '100% 100%'}); }    
    }); 

</script>

这是与问题有关的 CSS（我知道其中大部分可能是多余的）：

 #centerdiv {
    width:100%;
    height: 642px;
    background-color: #333333;
    background-image:url('http://www.ind-mediagroup.com/wp-  content/themes/twentyeleven/indeximg/houston-night.jpg');
    background-repeat: no-repeat;/* i believe the next few lines are dealt with in the jquery code*/
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;

    top:0px;
    padding-top: 55px;
}

.contentdiv {
    width: 78%;
    height: 75%;
    margin: auto auto auto 140px; 
    background-image: url('http://www.ind-mediagroup.com/wp-   content/themes/twentyeleven/indeximg/whitetransbg.png');
    position: relative;
    z-index: 10;
}

以下是与该问题相关的 HTML：

<div id="centerdiv">
    <div class="contentdiv">
        <div class="wrappercontent">
            <div id="contentname">
                <p class="contentTextHeader">+<?php the_title() ?></p>
            </div>

            <div id="content">

                <?php
                    if (have_posts()) :
                        while (have_posts()) :
                            the_post();
                            the_content();
                        endwhile;
                    endif;
                ?>

            </div>

            <div id="contentright">
                <?php echo apply_filters('the_content', get_post_meta($post->ID, 'page_image', true) ); ?>       
            </div>
        </div> 
    </div>
</div>

第二个问题是：我希望背景图像填充 100% 的 div 空间。我设法通过添加以下内容使其在 Chrome 中工作：

$('#centerdiv').css({'background-size': '100% 100%'});

我不是 jquery 专家，所以到目前为止我也不是专家，并且不确定前面的代码是否正确，但在其他浏览器中，它给了我一个奇怪的效果。它将显示较大的图像，并在显示正确大小的图像后立即显示。使用现有的 jquery 代码，有没有办法做到这一点？

我真的很感激任何帮助。我非常接近我想要的位置。

4

1 回答 1

0

contentdiv必须放在外面centrediv。contentdiv必须是绝对定位的那种叠加。我使用轨道滑块进行图像滑动。

示例 html：

<style type="text/css">
    #centerdiv{
        border-radius: 3px;
    }
    #contentdiv{
        position: absolute;
        top: 20px;
        left:40px;
        z-index: 300;
    }
</style>

<body>

    <div id="centerdiv">
        <img src="http://www.lorempixum.com/898/270/animals" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/city" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/food" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/sports" alt="" /> 
    </div>
    <div id="contentdiv">
            This is my text
    </div>
    <pre>Animals -> City -> Food -> Sports</pre>
    <script type="text/javascript">
        $(window).load(
            function(){
                $('#centerdiv').orbit({
            'timer': true,
            'advanceSpeed': 6000,
            'bullets' : false,
            'bulletThumbs': false, 
            });});
    </script>
</body>
于 2012-04-21T09:30:21.843 回答