Перейти к содержанию

[ВОПРОС] ipb меняющийся фон через время

usergeuv1

Автор usergeuv1
в Invision Power Board 3.x

 Поделиться

Рекомендуемые сообщения

usergeuv1 Основной

usergeuv1

Опубликовано
Опубликовано (изменено)

Как реализовать  меняющийся фон разных картинок для ipb через время,например 5сек.

 

ВтиканулO.o, перенесите в Техническая поддержка IP.Board

Изменено пользователем usergeuv1
Ссылка на комментарий
Поделиться на другие сайты
Back Соавтор

Back

Опубликовано
Опубликовано

Глобальные --> globalTemplate

Находим: 

<body id='ipboard_body'>

 

Ниже вставляем: 

<script type="text/javascript">
theTime = new Date();
theHour = theTime.getHours();
theMinute = theTime.getMinutes();
if(theHour>=9&&theHour<=17){
document.body.style.cssText = "background: #59b0ee url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg1.jpg') top center repeat-x";
}
else if(theHour>6&&theHour<9){
document.body.style.cssText = "background: #26abf6 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg2.jpg') top center repeat-x";
}
else if(theHour>17&&theHour<21){
document.body.style.cssText = "background: #26abf6 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg3.jpg') top center repeat-x";
}
else{
document.body.style.cssText = "background: #155e87 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg4.jpg') top center repeat-x";
}
</script>

 

если ваше время:

- больше или равно 9 и меньше или равно 17 - устанавливается bg1.jpg из папки _backgrounds
- больше 6 и меньше 9 - устанавливается bg2.jpg из папки _backgrounds
- больше 17 и меньше 21 - устанавливается bg3.jpg из папки _backgrounds
- в остальное время - устанавливается bg4.jpg из папки _backgrounds

Не забудьте загрузить сами фоновые изображения в папку _backgrounds вашего стиля! А так же не забудьте поменять в коде 

http://site.ru/

на адрес Вашего сайта  

/ваш_стиль/

 

Ссылка на комментарий
Поделиться на другие сайты
usergeuv1 Основной

usergeuv1

Опубликовано
  • Автор
Опубликовано

а через ,например 10 сек

и повторяючиися по кругу

Ссылка на комментарий
Поделиться на другие сайты
Back Соавтор

Back

Опубликовано
Опубликовано
5 часов назад, Back сказал:

- больше или равно 9 и меньше или равно 17 - устанавливается bg1.jpg из папки _backgrounds
- больше 6 и меньше 9 - устанавливается bg2.jpg из папки _backgrounds
- больше 17 и меньше 21 - устанавливается bg3.jpg из папки _backgrounds
- в остальное время - устанавливается bg4.jpg из папки _backgrounds

Походу здесь все норм описаные.

Ссылка на комментарий
Поделиться на другие сайты
usergeuv1 Основной

usergeuv1

Опубликовано
  • Автор
Опубликовано
Только что, Back сказал:

Походу здесь все норм описаные.

Да ,ясно ,но я хочу изменение фона через 5 сек,как это реализовать? 

Ссылка на комментарий
Поделиться на другие сайты
ro-avde Восходящая звезда

ro-avde

Опубликовано
Опубликовано
5 часов назад, usergeuv1 сказал:

Да ,ясно ,но я хочу изменение фона через 5 сек,как это реализовать? 

Попробуйте заменить hours на second

Ссылка на комментарий
Поделиться на другие сайты
usergeuv1 Основной

usergeuv1

Опубликовано
  • Автор
Опубликовано

Спасибо ребята  за ответы. Вот нашол интересующий мня скрипт  

<style>
ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_7.jpg);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(http://сайт.ru/script/img/css/cssfon_6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>
<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>

 

Тему можно закрыть

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...