0

我正在编写一个网站，我想要的是一系列滚动的背景图像。棘手的部分是我必须将背景图像设置为占据整个屏幕，而右侧和底部没有任何滚动条，而不会丢失纵横比。

（我用这个数字来获得我想要的背景）

我的 HTML 如下所示：

<div class="bg">
    <div class="slider">
        <div class="slider1"><img src="background1.jpg" class="back"/></div>
        <div class="slider2"><img src="background2.jpg" class="back"/></div>
        <!-- <div class="slider3">slide3</div>
        <div class="slider4">slide4</div>
        <div class="slider5">slide5</div> -->
    </div>
</div><!--end bg-->
<div class="buttons">
<div class="left"><--</div>
<div class="right">-></div> 
</div>

我的CSS：

.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

overflow: hidden;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    .bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }

}

img.back {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.back {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}


.slider{
width: 200%;
position: relative;
}
.slider1, .slider2, .slider3, .slider4, .slider5{
width: 50%;
    float: left;
}

.buttons{
    position: absolute;
    top:200px;
    left: 200px;
    color: red;
    font-size: 50px;
}

和我的jQuery：

$(document).ready(function(){
var total = 2
var current = 1
$(".left").click(function(){
    if(current<total){
    current --
    $(".slider").animate({left:"-=100%"})
    }
})
    $(".right").click(function(){
        if(current>1){
        current ++
        $(".slider").animate({left:"+=100%"})
    }
})

})

请让我知道我正在尝试做的事情是否可行！我认为我现在遇到的主要问题是 jquery 和百分比动画。

4

1 回答 1

0

百分比的高度和宽度仅在其父级也具有一定的高度和宽度时才起作用。因此，每当您将高度/宽度作为百分比给出时，它都会搜索其父级是否具有高度属性的第一个天气，如果还有百分比，它会向上遍历 DOM，直到找到以像素为单位的高度/宽度（或其他比例）。

但在你的情况下，你不知道窗口的实际高度。因此，您可以计算窗口大小并将其分配给 div 高度作为像素，而不是给出高度属性。

这可能对你有用

CSS

.bg {
width:100%;
position:fixed;
overflow: hidden;
}

.slider{
position:absolute;
}

.slider1,slider2{
float:left;
}

img.back{
width:100%;
height:100%;
}

查询

    function resizeBackGround(){
    var windowHeight=$(window).height();
    var windowWidth=$(window).width();

    $('.slider').css({
    width:(windowWidth*2)+'px', //take multiple according to number of background image you are using.
    height:windowHeight+'px'
    });
    $('.slider1,.slider2').css({
    width:windowWidth+'px',
    height:windowHeight+'px'
    });

    }


    $(document).ready(function(){
      resizeBackGround();
      $(window).resize(function(){
         resizeBackGround();
      });

});

之后您可以使用您的动画功能来切换背景图像。

于 2013-01-06T13:58:49.757 回答