jQuery：循环交叉渐变 + CSS 背景拉伸
我正在尝试创建一个幻灯片，其中图像被拉伸到浏览器的最大宽度和高度，同时执行交叉淡入淡出。我遇到的问题是，当用户拉伸窗口时，背景的重新拉伸大多数时候都会失败。我怀疑这与 jQuery Cycle 在动画过程中重绘的方式有关。
有没有其他人使用 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
I'm trying to create a slideshow where the images are stretched to the browser's maximum width and height, while performing a crossfade. The problem I'm encountering is that when the user stretches the window, the re-stretching of the background fails most of the time. I suspect it has to do with the way jQuery Cycle redraws during the animation process.
Has anyone else solved this issue using the CSS+Cycle method? My code:
<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>
Here's the example I have now:
http://play.meyouand.us/110920-jquery-stretchcycle/test1.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是 100% 确实是 100% 的视口。当您更改窗口大小时，浏览器不会重新绘制/重新计算 100% 宽度。
您可以做的是，当窗口大小变得大于原始大小时，重新加载页面上的元素。
这应该在 100% 视口重新加载 ul/li 组合。
The issue is that 100% is really 100% of the viewport. When you change the window-size the browser doesn't redraw/recalculates the 100% width.
What you could do is reload the elements on the page, when the window size becomes larger than the original.
This should reload the ul/li combo at 100% viewport.