jQuery: циклическое перекрестье + растяжение фона CSS - PullRequest
Новая
       4

jQuery: циклическое перекрестье + растяжение фона CSS

0 голосов
/ 21 сентября 2011

Я пытаюсь создать слайд-шоу, где изображения растягиваются до максимальной ширины и высоты браузера, выполняя перекрестное затухание.Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь растягивает окно, повторное растяжение фона в большинстве случаев не выполняется.Я подозреваю, что это связано с тем, как 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

1 Ответ

1 голос
/ 02 ноября 2011

Проблема в том, что 100% - это действительно 100% области просмотра. При изменении размера окна браузер не перерисовывает / не пересчитывает ширину 100%. Что вы можете сделать, это перезагрузить элементы на странице, когда размер окна становится больше, чем оригинал. Это должно перезагрузить комбо ul / li на 100% области просмотра.

...