全屏滾動背景圖片

我正在編碼一個網站，我想要的是一系列滾動的背景圖片。棘手的部分是我必須將背景圖像設置爲佔用整個屏幕，而沒有任何右側和底部的滾動條而不會損失寬高比。全屏滾動背景圖片

（我用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和百分比動畫。

來源

2013-01-06 user1952086

您的jQuery代碼需要分號，我不確定腳本本身是否工作，但至少語法必須正確。 – Nerbiz

我已經使用了這個確切的jQuery代碼，但百分比爲PX，它工作得很好！不需要分號。 – user1952086

百分比上的高度和寬度僅在其父母具有某種高度和寬度時才起作用。因此，無論何時您將百分比高度/寬度作爲百分比，它都會搜索第一個天氣，其父母是否具有高度屬性，如果還有百分比，則向上遍歷DOM，直到找到以像素（或其他比例）爲單位的高度/寬度。

但在你的情況下，你不知道窗口的實際高度。因此，不是給予高度屬性，而是可以計算窗口大小並將其作爲像素高度進行分配。

這可能會爲你工作

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

});

後，您可以使用您的動畫功能，切換背景圖像。

來源

2013-01-06 13:58:49

全屏滾動背景圖片

回答

相關問題