jQuery：循環Crossfades + CSS背景拉伸

我試圖創建一個幻燈片，其中圖像拉伸到瀏覽器的最大寬度和高度，同時執行交叉淡入淡出。我遇到的問題是，當用戶拉伸窗口時，大部分時間都會重新拉伸背景。我懷疑它與jQuery Cycle在動畫過程中重繪的方式有關。jQuery：循環Crossfades + CSS背景拉伸

有沒有其他人使用CSS + Cycle方法解決了這個問題？我的代碼：

<html> 
<script type="text/javascript" src="/_jquery/jquery-1.6.4.min.js"></script> 
<script type="text/javascript" src="/_jquery/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(window).bind('load', function() { 
    $('.kittens li:first').fadeIn(1000, function() { 
      $('.kittens').cycle({ delay: 1000 }); 
     }); 
}); 
}); 
</script> 
<link rel="stylesheet" href="/_css/reset.css" type="text/css" media="screen" /> 
<style type="text/css"> 
html, body { overflow: hidden; width: 100%; height: 100%; } 
.kittens { width: 100%; height: 100% } 
.kittens li { 
width: 100%; 
height: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
display: none; 
} 
.kitten1 { background: url(kitten1.jpg) no-repeat center center fixed; } 
.kitten2 { background: url(kitten2.jpg) no-repeat center center fixed; } 
.kitten3 { background: url(kitten3.jpg) no-repeat center center fixed; } 
</style> 
<body> 
<ul class="kittens"> 
<li class="kitten1">Kitten1</li> 
<li class="kitten2">Kitten2</li> 
<li class="kitten3">Kitten3</li> 
</ul> 
</body> 
</html>

這裏的例子，我現在有： http://play.meyouand.us/110920-jquery-stretchcycle/test1.html

來源

2011-09-21 Marc P

我正在尋找一個懶惰的解決方案（避免它），但爲什麼用戶會調整他們的窗口？ – LocustHorde

在大多數情況下，他們不會。但是，我看到一些情況，測試用戶意識到背景是爲他們的窗口量身打造的，並開始伸展自己的視野，看看是否屬於這種情況。 –

的問題是，100％的視口的真正的100％。當您更改窗口大小時，瀏覽器不會重新繪製/重新計算100％的寬度。當窗口大小比原始大時，你可以做的是重新加載頁面上的元素。這應該在100％視口重新加載ul/li組合。

來源

2011-11-02 19:27:29 TeckniX

好的解決方案！我嘗試使用location.reload（），但它隨後也將幻燈片序列重置爲1.是否有方法來重新加載特定元素而無需重新加載頁面？我到目前爲止：http://play.meyouand.us/110920-jquery-stretchcycle/test2.html –

可能不是最好的，但你可以這樣做：$（window）.resize（function（）{ $ myKittens =（「。kittens」）。clone（）; $（「。kittens」）。remove（）; $ myKittens.appendTo（「body」）; $（'。kittens li：first'）。fadeIn （1000，function（）{（'。kittens'）.cycle（{ delay：1000 }）; }）; }）; - 您也可以查看https://gist.github.com/740199 Jquery Force重繪 – TeckniX

jQuery：循環Crossfades + CSS背景拉伸

回答

相關問題