[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Смена фона без перегрузки с анимационными эфектами

Смена фона без перегрузки с анимационными эфектами
[31] likbezz [29.03.2012, 00:52]
ADMINistrator5946,
Quote (ADMINistrator5946)
Я поставила 0 у меня только эта картинка и показывает.

Логично.
Quote (ADMINistrator5946)
Как сделать последовательную смену т.е. 0, 1, 2, 3, 4, 5, 6 и опять так-же 0, 1, 2, 3 ....

Вот так:
Code
<script type="text/javascript">
function showImg(i){
var imgBg=new Array()
imgBg[0]='http://likbezz.ru/_example/rotator/psBg.gif';
imgBg[1]='http://likbezz.ru/_example/rotator/psBg-e.gif';
imgBg[2]='http://likbezz.ru/_example/rotator/psBg-g.gif';
imgBg[3]='http://likbezz.ru/_example/rotator/psBg-r.gif';
imgBg[4]='http://likbezz.ru/_example/rotator/psBg-b.gif';
imgBg[5]='http://likbezz.ru/_example/rotator/psBg-gb.gif';
imgBg[6]='http://likbezz.ru/_example/rotator/psBg-s.gif';
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>

Где:
showImg(0); - стартовое изображение.
... Должны будете )
...
[32] ADMINistrator5946 [29.03.2012, 21:27]
likbezz, да заработало. А вы можете проверить я когда захожу в первый раз все показывается как надо, изображения идут по порядку, если я перехожу в другой раздел или нажимаю на главную, все фоновые изображения исчезают. А если нажать обновить страницу то появляются на любой где бы я не была. Что это может быть?
Попробуйте перейти на сайт а на нем с главной перейти в гостевую или другой раздел у вас так-же будет?


Сообщение отредактировал ADMINistrator5946 - Четверг, 29.03.2012, 21:37
[33] likbezz [29.03.2012, 22:22]
ADMINistrator5946,
Quote (ADMINistrator5946)
А вы можете проверить я когда захожу в первый раз все показывается как надо, изображения идут по порядку, если я перехожу в другой раздел или нажимаю на главную, все фоновые изображения исчезают.

На главной всё нормально работает.
Установите, кстати, фоновую картинку по умолчанию, для блока.

В других же модулях, типа гостевой, у вас данный скрипт не установлен.
...
[34] ADMINistrator5946 [29.03.2012, 22:37]
likbezz, да проверила в остальных браузерах все работает на УРА, это походу мой браузер яндекс интернет тупит.
[35] likbezz [29.03.2012, 22:51]
ADMINistrator5946,
Quote (ADMINistrator5946)
это походу мой браузер яндекс интернет

А это что за браузер такой? Мозилла яндекс-сборки что ли?
[36] ADMINistrator5946 [29.03.2012, 22:58]
likbezz,не точное подобие Chrom.
[37] 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 совсем нет анимации.

[38] likbezz [28.07.2012, 09:55]
salam-design,
Quote (salam-design, Сб, 28.07.2012, 09:42:15)
фон меняется только после обновления страницы.

Логично, у вас скрипт такой - меняет картинки при обновлении, и анимация в нем не предусмотрена.
Читаем тему сначала, а именно, начиная с Сообщения # 6
[39] salam-design [28.07.2012, 10:41]
А какой же код мне выбрать из 3-х приведённых в "сообщении № 6"?
У меня должна анимироваться шапка 1060Х316 пикселов.
[40] likbezz [28.07.2012, 10:45]
salam-design,
Quote (salam-design, Сб, 28.07.2012, 10:41:53)
А какой же код мне выбрать из 3-х приведённых в "сообщении № 6"?

Полагаю, тот что с анимацией и без перегрузки страницы .. Это, вроде, вам нужно.
[41] salam-design [28.07.2012, 10:51]
И там пока только 2 картинки. Так что анимация в сулчайном порядке мне не подходит.

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

[42] likbezz [28.07.2012, 10:56]
salam-design,
Quote (salam-design, Сб, 28.07.2012, 10:51:28)
И там пока только 2 картинки. Так что анимация в сулчайном порядке мне не подходит.

Ну да, прямо готового - взял-поставил нет, конечно ...
За то есть по отдельности ... ) Несложно собрать, если нужно ...
[43] 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)
---------------------------------------------
Как же исправить это глюк?

[44] likbezz [28.07.2012, 21:22]
salam-design,
Quote (salam-design, Сб, 28.07.2012, 19:28:54)
Попытка скомпилировать что есть. Пропало фоновое изображение, правда

А ничего что там просто сборная солянка и нескольких скриптов, причем не польностью?)

Quote (salam-design, Сб, 28.07.2012, 19:28:54)
Я, видимо, не правльно объяснила проблему

Ваша проблемв предельно есна - скрипт работает не так как вам нужно, потому что это просто не тот скрипт и по другому он работать не будет. В нем не прописана анимация вообще, если мы говорим о том коде что в вашем сообщении №37 ...

Quote (salam-design, Сб, 28.07.2012, 19:28:54)
Посмотрите:
http://albaraka.ru/
шапка статичная, нажмёте F5, она начнёт "играть".

У меня играть не стала)
Поменяйте местами скрипт и блок, скрипт должен быть всегда ниже блока к которому применяется.


...

Quote (salam-design, Сб, 28.07.2012, 19:28:54)
Как же исправить это глюк?

Давайте так, вы не забиваете себе голову, кидаете мне 3$ и вам пишу скрипт как вам нужно - с анимацией, без ошибок и быстро.

Либо точим «краеугольный камень» дальше.
Впрочем, у вас есть хороший шанс дождаться скрипта совершенно бесплатно) но не сейчас...
Прикрепления: 1959714.png (9.8 Kb)
[45] salam-design [29.07.2012, 05:14]
Заработало! Поменяла местами скрипт и блок, по вашему совету. Благополучия вам и полезных знаний!


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