Фильтр по:
  

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Случайная фоновая картинка на Java Script (Смена картинки при обновлении страницы ...)
Случайная фоновая картинка на Java Script
Дата: Четверг, 06.05.2010, 15:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Многие создатели сайтов желая привнести оригинальность в дизайн своего «шЭдевра, подумывают над тем как сделать изменяющуюся подложку (фон) на сайте, динамическую смену фона шапки сайта и прочую, ... , ...

Сейчас попробую намутить такой «прибамбас» для любого сайта .... Для сайтов на uCoz - делается намного проще и (!!) «грамотнее», но этот вариант, будет на Java Script ....

Про эту же «феничку», но на информерах, написал (или ещё не написал, но напишу) ... В любом случае, смотреть вот здесь ... «Случайная фоновая картинка для «шапки» сайта на «информерах» ...

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

Итак. Вариант намбер ван...

Просто рататор фоновых картинок.

HTML-код:
Code
<script type="text/javascript">
document.write('<div style=\"background:'+imgBg[whichquote]+'\">');
</script>
<noscript>
<div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div>
</noscript>Здесь располагается содержимое нового тега Div
<script type="text/javascript">
document.write('</div>');
</script>


Немного пояснения - в «noscript» - блок с фоновой картинкой «по умолчанию» ... если, вдруг, у пользователя отключён JS ...

Java Script-код:
Code
<script type="text/javascript">
<!--
var imgBg=new Array()
imgBg[0]='url(\/_example\/rotator\/psBg.gif);';
imgBg[1]='url(\/_example\/rotator\/psBg-e.gif);';
imgBg[2]='url(\/_example\/rotator\/psBg-g.gif);';
imgBg[3]='url(\/_example\/rotator\/psBg-r.gif);';
imgBg[4]='url(\/_example\/rotator\/psBg-b.gif);';
imgBg[5]='url(\/_example\/rotator\/psBg-gb.gif);';
imgBg[6]='url(\/_example\/rotator\/psBg-s.gif);';
var whichquote = Math.floor(Math.random()*(imgBg.length));
//-->
</script>


Сам массив, как говорится ... Лучше запихнуть в отдельный файл и подключать уже его... До вставки «document.write» ...
С заливкой тоже особо не возился, взял стандартную «фотошоповскую» ... чуть приукрасил .. ничего так получилось ...

Скрин:



Прикрепления:

Прикрепления (JS-файл v1)

Прикрепления (HTML-файл v1 ... пример работы скрипта)

/* ====== \\..// ===== *\


Вариант намбер ту... ... чуть посложнее, и с другим принципом отбора ... (getSeconds) ..

Ротатор фоновых картинок, да всего, что угодно, плюс контент ... (прикольно просто - для себя, так сказать ...)

HTML-код (v2):
Code
<script type="text/javascript">
document.write('<div style=\"background:'+cliche+'\"><br><br><h2>'+txt+'</h2>');
</script>
<noscript><div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div></noscript>
<script type="text/javascript">
document.write('</div>');
</script>


Всё, то же самое, что и в первом, плюс контент ... (у меня - прикольные фразы ... - у вас - что поставите ... ヅ)

Java Script-код (v2):
Code
<script type="text/javascript">
<!--
url0="url(\/_example\/rotator\/psBg.gif);";
txt0="«Народная примета: Если сисадмин в 09.00 утра на работе, значит он там ночевал...»";

url1="url(\/_example\/rotator\/psBg-e.gif);";
txt1="«Народная примета v2.0: Если админ в 9:00 на рабочем месте - значит, сервер не работает... ヅ»";

url2="url(\/_example\/rotator\/psBg-g.gif);";
txt2="«Не говорите программисту: «Заходи, гостем будешь!», порадуйте его возможностью зайти администратором или, в крайнем случае, пользователем...»";

url3="url(\/_example\/rotator\/psBg-r.gif);";
txt3="«Если глюк оказался вдруг, и не друг и не враг, а баг...»";

url4="url(\/_example\/rotator\/psBg-b.gif);";
txt4="«Каждый сисадмин, наверно, хоть раз думал, что что пора покупать шаманский бубен, потому что иногда объяснить что же ты сделал, чтоб всё заработало (и почему до этого не работало)... ... ヅ»";

url5="url(\/_example\/rotator\/psBg-gb.gif);";
txt5="«На Новый Год все надели разные маски: кто - зайчика, кто - лисички... И только sysadmin надел свою любимую: 255.255.255.0...»";

url6="url(\/_example\/rotator\/psBg-s.gif);";
txt6="«Мораль: Не трогай технику и она тебя не подведёт.<br>Резюме: Если и это не получается, прочтите, наконец, инструкцию...»";

now=new Date()
num=(now.getSeconds() )%7
if (num == 0)
{cliche=url0;txt=txt0;}
if (num == 1)
{cliche=url1;txt=txt1;}
if (num == 2)
{cliche=url2;txt=txt2;}
if (num == 3)
{cliche=url3;txt=txt3;}
if (num == 4)
{cliche=url4;txt=txt4;}
if (num == 5)
{cliche=url5;txt=txt5;}
if (num == 6)
{cliche=url6;txt=txt6;}
//-->
</script>


Где:
num=(now.getSeconds() )%7 - количество ваших «блоков» («urlx» и «txtx») плюс один (1). То есть если блоков 6, как в данном случае, то ставите 7, если 25, то, соответственно, 26...

Опять же, как и в первом варианте, все это «хозяйство» - в отдельный файл ... - не мне вас учить ...

И, как уже «повелось» прикрепления:

Скриншот:



И файлы:

Прикрепления (JS-файл v2)

Прикрепления (HTML-файл v2 ... Сам пример работы скрипта)

P.S. Если, вдруг, что-то непонятно, или, может быть, какие идеи/вопросы, пишите сюда ...

P.P.S. Если случится так, что вопрос «в оффтор» - создайте свою тему... и напишите туда ...

Ну а если Вы «Гость», и для этого уже есть тема ... даже несколько тем. Для удобства «помечены» вот такими букафками: (Free access) ... (всё для вас ... ヅ) ...
...

Прикрепления: 4079780.png (10.3 Kb) · 9046141.png (16.8 Kb)

 
Дата: Вторник, 06.12.2011, 02:21 |
MarkoniYA
Рядовой
Группа: Пользователи
Сообщений: 4
Награды: 0
Репутация: 1
Статус: Offline


Есть простенький скрипт, меняющий картинку из заданной папки, после обновления страницы
Code
<script type="text/javascript">
sha=Math.floor(Math.random() *5);
document.write('<img src="http://сайт/image/header/logo'+sha+'.gif" border="0" height="97"/>');</script>


И есть такой скриптик
Code
<DIV style="height: 97px; background: url(http:/сайт/Forums/lights.gif) repeat-x 100%;"></DIV>

что бы картинка повторялась по ширине страницы.

Возможно ли совместить эти два скрипта? cry


 
Дата: Вторник, 06.12.2011, 04:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


MarkoniYA,
Quote (MarkoniYA)
что бы картинка повторялась по ширине страницы.
Возможно ли совместить эти два скрипта?

Да, конечно.
Code
<div id="rand_bg" style="height:97px;background:url(http://likbezz.ru/_example/bg/patterns/patt8_6.jpg) repeat-x 100%;"> </div>
<script type="text/javascript">
(function(){
document.getElementById('rand_bg').style.background='url(http://likbezz.ru/_example/bg/patterns/patt8_'+Math.floor(Math.random()*5)+'.jpg) repeat-x 100%';
})();
</script>

....

Пример ... (rand_bg_1)
...

Читаем тему: Динамическая смена картинки при обновлении страницы .


 
Дата: Вторник, 06.12.2011, 12:17 |
MarkoniYA
Рядовой
Группа: Пользователи
Сообщений: 4
Награды: 0
Репутация: 1
Статус: Offline


Именно то что нужно. Спасибо! biggrin

Эх, засада. Не подошло)). У меня на сайте этими полосами новости разделяются. Меняется только верхняя полоса. А остальные не меняются.


Сообщение отредактировал MarkoniYA - Вторник, 06.12.2011, 20:11
 
Дата: Четверг, 08.12.2011, 02:00 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


MarkoniYA,
Quote (MarkoniYA)
Эх, засада. Не подошло)). У меня на сайте этими полосами новости разделяются. Меняется только верхняя полоса. А остальные не меняются.

... Привяжи к классам ... - То бишь, полосам задай класс и скрипт поправь, соответственно ...

Типа:
Code
<div class="rand_bg" style="height:97px;background:url(http://likbezz.ru/_example/bg/patterns/patt8_6.jpg) repeat-x 100%;"> </div>
<br />
<div class="rand_bg" style="height:97px;background:url(http://likbezz.ru/_example/bg/patterns/patt8_6.jpg) repeat-x 100%;"> </div>
<script type="text/javascript">
$('div.rand_bg').css('background','url(http://likbezz.ru/_example/bg/patterns/patt8_'+Math.floor(Math.random()*5)+'.jpg) repeat-x 100%');
</script>

...

А вообще, стили неплохо бы вынести из кода - в основную CSS ///
... Типа:
Это - в основную css
Code
div.rand_bg{height:97px;background:url(http://likbezz.ru/_example/bg/patterns/patt8_6.jpg) repeat-x 100%;}


Это - по месту ...
Code
<div class="rand_bg"> </div>
<br />
<div class="rand_bg"> </div>


Это - куда нить после оператора $body$
Code
<script type="text/javascript">
$('div.rand_bg').css('background','url(http://likbezz.ru/_example/bg/patterns/patt8_'+Math.floor(Math.random()*5)+'.jpg) repeat-x 100%');
</script>


Пример ... (rand_bg_2)
...

По теме: Автоматическая смена фона/картинки без перезагрузки страницы (Решение на Java Script...)
...


 
Дата: Вторник, 17.04.2012, 19:55 |
Neon
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Спасибо

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Случайная фоновая картинка на Java Script (Смена картинки при обновлении страницы ...)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия