jQuery: Cycle Crossfades + CSS Background Stretching
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(k开发者_Go百科itten3.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
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.
加载中,请稍侯......
精彩评论