[Ликбез]

Форма входа

Меню сайта



Результаты поиска
[1 | Тема: Смена фона без перегрузки с анимационными эфектами] salam-design [28.07.2012, 09:42]
Здравствуйте!

Мне понравился ваш способ смены фона.

Однако у меня возникла проблема:
фон меняется только после обновления страницы.
То есть, я захожу на какую-то страницу сайта и фон статичный, нажимаю F5, и фон меняется.

Мой код в теге <body>
<script type="text/javascript">
function showImg(i){
var imgBg=new Array()
imgBg[0]='http://albaraka.ru/wp-content/uploads/2012/07/1.jpg';
imgBg[1]='http://albaraka.ru/wp-content/uploads/2012/07/2.jpg';
imgBg[2]='http://albaraka.ru/wp-content/uploads/2012/07/1.jpg';
imgBg[3]='http://albaraka.ru/wp-content/uploads/2012/07/2.jpg';
var i=(i==undefined||i>imgBg.length-1)?0:i;
var u=imgBg[i],c=new Image();c.src=u;
var show=function(){setTimeout('showImg('+(++i)+')',3000)};
if(!c.complete){c.onload=function(){document.getElementById('rand_bg').style.background='url('+u+') repeat 0% 0%';show();}
}else{document.getElementById('rand_bg').style.background='url('+u+') repeat 0% 0%';show();}
};showImg(0);
</script>

<a href="http://albaraka.ru/" id="topLink"></a>
<div id="wrap0">
<div id="rand_bg" style="height: 316px; background: url("http://albaraka.ru/wp-content/uploads/2012/07/1.jpg") no-repeat;"> </div>
<div id="rand_bg_1" style="height: 316px; background: url("http://albaraka.ru/wp-content/uploads/2012/07/2.jpg") no-repeat"> </div>
</div>


А это код в style.css:

#wrap0 {width: 1060px; height: 316px; background: #2B0900 url(http://albaraka.ru/wp-content/uploads/2012/07/1.jpg) no-repeat top center;}
#rand_bg {background: no-repeat top center;width:100%;}
#topLink{display:block;position:absolute;top:50px;left:150px;width:700px;height:260px;}

#wrap0,#rand_bg{
-moz-background-size:102% auto!important;
-o-background-size:102% auto!important;
-webkit-background-size:102% auto!important;
-khtml-background-size:102% auto!important;
background-size:102% auto!important;
}

Добавлено (28.07.2012, 09:42)
---------------------------------------------
Это в Opera и IE. А в Mozilla совсем нет анимации.

[2 | Тема: Смена фона без перегрузки с анимационными эфектами] salam-design [28.07.2012, 10:41]
А какой же код мне выбрать из 3-х приведённых в "сообщении № 6"?
У меня должна анимироваться шапка 1060Х316 пикселов.
[3 | Тема: Смена фона без перегрузки с анимационными эфектами] salam-design [28.07.2012, 10:51]
И там пока только 2 картинки. Так что анимация в сулчайном порядке мне не подходит.

Добавлено (28.07.2012, 10:51)
---------------------------------------------
А тема так и называется " Смена фона без перегрузки с анимационными эфектами", хи-хи.

[4 | Тема: Смена фона без перегрузки с анимационными эфектами] salam-design [28.07.2012, 19:28]
Ну, если нет готового, я закладываю "краеугольный камень":

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://s2.ucoz.net/src/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://s2.ucoz.net/src/uwnd.js?2"></script>
<style type="text/css">
#rand_box{position:relative;width:1060px;height:316px;overflow:hidden; margin:0;}
img#bgImg1,img#bgImg2{display:block;position:fixed;top:0;left:0;width:1060px;height:316px;z-index:-1;}
</style>
</head>
<body>
<div id="dm1">
<div id="rand_box">
<!--Start()-->
<script type="text/javascript">
function getElmHeight(el){var e=el;return (e.scrollHeight>e.offsetHeight)?e.scrollHeight:e.offsetHeight;}
function showImg(){
var imgBg=new Array()
imgBg[0]='http://albaraka.ru/wp-content/uploads/2012/07/1.jpg';
imgBg[1]='http://albaraka.ru/wp-content/uploads/2012/07/2.jpg';
var i=(i==undefined||i>imgBg.length-1)?0:i;
var u=imgBg[i],c=new Image();c.src=u; obj=$('dm1'),h=getElmHeight(document.getElementById('rand_box'));

if(!document.getElementById('bgImg1')){
obj.append('<img id="bgImg1" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" /><img id="bgImg2" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" />');
$('#bgImg1').css('background',obj.css('background'));
};
if(obj.css('background')!='transparent'){
obj.css('background','transparent');
};
var img1=$('#bgImg1').css('height',h+'px'),img2=$('#bgImg2').css('height',h+'px');
var changeBg=function(){
if(img1.css('opacity')==0){
img2.animate({opacity:'0'},1200);
img1.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}else{
img1.animate({opacity:'0'},1200);
img2.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}};
if(!c.complete){c.onload=function(){document.getElementById('#bgImg1').style.background='url('+u+') repeat 0% 0%';show();}
}else{document.getElementById('#bgImg1').style.background='url('+u+') repeat 0% 0%';show();}
};showImg(0)',5000);
};
$(document).ready(function(){showImg();});
</script>
<!--//End()-->
<img id="bgImg1" style="position:absolute;z-index:-1;" src="/_theme1/_st/img/spacer.gif" alt="" />
<img id="bgImg2" style="position:absolute;z-index:-1;" src="/_theme1/_st/img/spacer.gif" alt="" />
</div>
</body>
</html>


Попытка скомпилировать что есть. Пропало фоновое изображение, правда. Может, вам видны какие-то какие-то ошибки и пр.?

Добавлено (28.07.2012, 17:25)
---------------------------------------------
Я, видимо, не правльно объяснила проблему: скрипт смены фона начинает работать только после обновления страницы, то есть анимация начинается после обновления страницы (а не то, что фонновое изображение появляется другое после обновления).

Посмотрите:
http://albaraka.ru/
шапка статичная, нажмёте F5, она начнёт "играть".

Добавлено (28.07.2012, 19:28)
---------------------------------------------
Как же исправить это глюк?

[5 | Тема: Смена фона без перегрузки с анимационными эфектами] salam-design [29.07.2012, 05:14]
Заработало! Поменяла местами скрипт и блок, по вашему совету. Благополучия вам и полезных знаний!


Полная версия сайта