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背景拉伸

回答

相关问题