|
Смена фона без перегрузки с анимационными эфектами
|
|
| [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, фон меняется только после обновления страницы.
Логично, у вас скрипт такой - меняет картинки при обновлении, и анимация в нем не предусмотрена.
Читаем тему сначала, а именно, начиная с Сообщения # 6 |
|
| [39] salam-design [28.07.2012, 10:41] |
А какой же код мне выбрать из 3-х приведённых в "сообщении № 6"?
У меня должна анимироваться шапка 1060Х316 пикселов. |
|
| [40] likbezz [28.07.2012, 10:45] |
salam-design, А какой же код мне выбрать из 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, И там пока только 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, Попытка скомпилировать что есть. Пропало фоновое изображение, правда
А ничего что там просто сборная солянка и нескольких скриптов, причем не польностью?)
Я, видимо, не правльно объяснила проблему
Ваша проблемв предельно есна - скрипт работает не так как вам нужно, потому что это просто не тот скрипт и по другому он работать не будет. В нем не прописана анимация вообще, если мы говорим о том коде что в вашем сообщении №37 ...
Посмотрите:
http://albaraka.ru/
шапка статичная, нажмёте F5, она начнёт "играть".
У меня играть не стала)
Поменяйте местами скрипт и блок, скрипт должен быть всегда ниже блока к которому применяется.
...
Как же исправить это глюк?
Давайте так, вы не забиваете себе голову, кидаете мне 3$ и вам пишу скрипт как вам нужно - с анимацией, без ошибок и быстро.
Либо точим «краеугольный камень» дальше.
Впрочем, у вас есть хороший шанс дождаться скрипта совершенно бесплатно) но не сейчас...
|
|
| [45] salam-design [29.07.2012, 05:14] |
|
Заработало! Поменяла местами скрипт и блок, по вашему совету. Благополучия вам и полезных знаний! |
|
