Question

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

（我使用this计算得出我想要的背景）

我的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和动画与百分比。

Answer 1

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

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

这可能适合你

<强>的CSS

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

.slider{
position:absolute;
}

.slider1,slider2{
float:left;
}

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

<强> JQUERY

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

});

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

全屏滚动背景图像

1 个答案: