Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 09.10.2011, 12:17   #1
Lawilet
 
Регистрация: 05.10.2011
Сообщений: 9
По умолчанию Динамический фон

Доброго времени суток, уважаемые.

Необходима помощь.
Появилась потребность в динамичном фоне веб страницы, т.е. при обновлении - фон меняется на другой.
Фоны в виде фотографий хорошего качества.

Необходимо что бы фон растягивался на всю веб страницу, сейчас это реализовано вот так:
Код:
<style type="text/css">
  html, body {height: 100%;}
body {margin:0;
background: url(fonsite.jpg) no-repeat 50% 50%;
background-size: cover;
  </style>
Нужно что бы выбиралась другая фотография, при обновлении.
Если у вас есть готовые варианты, или энтузиазм, просьба поделиться.
Lawilet вне форума Ответить с цитированием
Старый 09.10.2011, 12:46   #2
ZvEr_HaCkEr
VisualC++/DirectX
Форумчанин
 
Аватар для ZvEr_HaCkEr
 
Регистрация: 16.07.2010
Сообщений: 831
По умолчанию

Че-то типа этого
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 3);
		if(a==1)
		$('body') .css('background','#000000 url(img/bg1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(img/bg2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(img/bg3.jpg) no-repeat 50% 50%');
	});
</script>
ZvEr_HaCkEr вне форума Ответить с цитированием
Старый 09.10.2011, 12:47   #3
Lawilet
 
Регистрация: 05.10.2011
Сообщений: 9
По умолчанию

Попробую.
Единственное что при объеме, допустим в 30 фотографий, будет не удобно.
Lawilet вне форума Ответить с цитированием
Старый 09.10.2011, 13:07   #4
Lawilet
 
Регистрация: 05.10.2011
Сообщений: 9
По умолчанию

Цитата:
Сообщение от ZvEr_HaCkEr Посмотреть сообщение
Че-то типа этого
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 3);
		if(a==1)
		$('body') .css('background','#000000 url(img/bg1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(img/bg2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(img/bg3.jpg) no-repeat 50% 50%');
	});
</script>
Проблема.
Иногда просто черный экран в виде фона, без фото.

Код на данный момент:
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 7);
		if(a==1)
		$('body') .css('background','#000000 url(images/fon/1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(images/fon/2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(images/fon/3.jpg) no-repeat 50% 50%');
		if(a==4)
		$('body') .css('background','#00000 url(images/fon/4.jpg) no-repeat 50% 50%');
		if(a==5)
		$('body') .css('background','#00000 url(images/fon/5.jpg) no-repeat 50% 50%');
		if(a==6)
		$('body') .css('background','#00000 url(images/fon/6.jpg) no-repeat 50% 50%');
		if(a==7)
		$('body') .css('background','#00000 url(images/fon/7.jpg) no-repeat 50% 50%');
	});
</script>

Последний раз редактировалось Lawilet; 09.10.2011 в 14:02.
Lawilet вне форума Ответить с цитированием
Старый 09.10.2011, 14:57   #5
savva-paladin
Пользователь
 
Аватар для savva-paladin
 
Регистрация: 09.07.2010
Сообщений: 89
По умолчанию

Насколько я помню, в языках, основанных на С, отсчёт начинается с 0…
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 7);
		if(a==0)
		$('body') .css('background','#000000 url(images/fon/1.jpg) no-repeat 50% 50%');
		if(a==1)
		$('body') .css('background','#000000 url(images/fon/2.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#00000 url(images/fon/3.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(images/fon/4.jpg) no-repeat 50% 50%');
		if(a==4)
		$('body') .css('background','#00000 url(images/fon/5.jpg) no-repeat 50% 50%');
		if(a==5)
		$('body') .css('background','#00000 url(images/fon/6.jpg) no-repeat 50% 50%');
		if(a==6)
		$('body') .css('background','#00000 url(images/fon/7.jpg) no-repeat 50% 50%');
	});
</script>
savva-paladin вне форума Ответить с цитированием
Старый 09.10.2011, 15:49   #6
ZvEr_HaCkEr
VisualC++/DirectX
Форумчанин
 
Аватар для ZvEr_HaCkEr
 
Регистрация: 16.07.2010
Сообщений: 831
По умолчанию

Сорри, описался. Последуйте совету savva-paladin.
ZvEr_HaCkEr вне форума Ответить с цитированием
Старый 09.10.2011, 20:52   #7
Lawilet
 
Регистрация: 05.10.2011
Сообщений: 9
По умолчанию

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

Просьба обратить внимание вот сюда: http://www.programmersforum.ru/showthread.php?t=168142
Lawilet вне форума Ответить с цитированием
Старый 20.11.2015, 15:31   #8
Exebeche
Новичок
Джуниор
 
Регистрация: 20.11.2015
Сообщений: 1
По умолчанию

Спасибо, savva-paladin.
Очень интересный прием. Вчера на него наткнулся и решил использовать для своего экспериментального сайта.
Хотел немного усовершенствовать скрипт, но наткнулся на проблему - не срабатывает для :hover.
Как можно решить эту проблему?
И можно ли как-то добавить еще некоторые классы для отображения "оттенка" имеющихся фонов?
Имеющийся код:
Код:
<script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 11);
		if(a==0)
		$( .menu-bar li a:hover, .menu li a:hover, '.menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#7e71d1');
		if(a==1)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#267fdd');
		if(a==2)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#1468ba');
		if(a==3)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#4ebaca');
		if(a==4)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#8455cf');
		if(a==5)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#0047ff');
		if(a==6)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#006dd6');
		if(a==7)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#f46161');
		if(a==8)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#32c555');
		if(a==9)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#9b72ff');
		if(a==10)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#eb58ac');
		if(a==11)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#c87f35');
	});
</script>
Exebeche вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фон Shyt HTML и CSS 0 23.05.2011 13:11
Динамический массив - или всё таки не динамический? vedro-compota Общие вопросы C/C++ 30 10.12.2010 23:22
Фон на фон. Alex Cones HTML и CSS 3 11.09.2010 16:06
фон beygul Общие вопросы Delphi 5 28.09.2008 11:28
Фон Стаханов_Андрей Помощь студентам 5 04.03.2008 08:20