Доброго времени суток, уважаемые читатели блога Мои тараканы!
Недавно передо мной возникла задача: придумать что-то, чтобы при каждой перезагрузке страницы, каждый раз загружался новый background страницы.
На каком-то форуме нашел такой скрипт:
var bgPath = '/img/bg';
var imagesNumber = 3;
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
К скрипту прилагались объяснения, но человек, который обратился за помощью так и не смог в них разобраться.
Я решил испробовать данный скрипт. Вставил всё по существующей инструкции, но и у меня тоже он, почему-то не сработал.
Немного повозился и… О чудо — всё работает!
Давайте вместе разберём этот код, в чем же была причина?
Первое: Данный скрипт нужно вставить после открывающего тега body.
Второе: Путь к изображениям. В шаблоне сайта я создал папку "background" и туда поместил изображения, которые должны рондомно (случайно, каждый раз другое) меняться при каждой перезагрузке страницы. Вы можете назвать эту папку как угодно. Или же совсем не создавать, а запихнуть файлы в уже существующую папку. Главное правильно указать путь к ним (лучше всего указать абсолютный путь).
Третье: Имя файла. В скрипте указано имя файла bg. Давайте и мы назовём свои беграунды bg0, bg1, bg2. Путь к изображению будет формироваться следующим образом: (+ bgPath + rndBg + '.jpg) — путь к картинке/bg (её название (без номера)) + номер картинки + расширение.
Последнее: var imagesNumber = 3 — 3 — это количество background’ов отображаемых в ротации. Если вы укажете число большее, чем число имеющихся у вас картинок — может проскочить «пустой» задний фон.
Пример:
<script type="text/javascript">;
var bgPath = 'http://ваш_сайт/templates/ваш_шаблон/images/backgrounds/bg'<!-- путь к изображениям (На WordPress путь может выглядеть так http://ваш_сайт/wp-content/temes/ваш_шаблон/images/backgrounds/bg)-->
var imagesNumber = 3;<!-- количество отображаемых изображений -->
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
</script>
Для того чтобы фоновое изображение растягивалось на всю ширину экрана и не прокручивалось с остальным контентом в файл CSS следующий код:
body {
background: fixed;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */}
Не нужно заменять все атрибуты тега body. Измените только нужные значения атрибута background.
Кстати, возможен другой вариант этой фишки:
var bgFolder = 'img/';
var backgrounds = [
'bg0.jpg',
'bg1.jpg',
'bg2.jpg',
'bg3.jpg',
'bg4.jpg'
];
var rndBg = Math.floor(Math.random() * 5);
document.body.style.backgroundImage = 'url(' + bgFolder + backgrounds[rndBg] + ')';
Ну, теперь, я думаю, с этим скриптом вы разберётесь сами. Ну, если нет — смотрите инструкции к предыдущему скрипту — своего рода задачка на логику.
Кстати, если пошёл разговор о задачах на логику — вот вам ещё одна:
Дошкольники решают эту задачу за 5-10 минут. У некоторых программистов уходит на неё до часа.
Но многие люди, исписав несколько листов бумаги, сдаются.
Маленькие дети не могут составлять уравнения или искать математические закономерности, поэтому они замечают, что значение зависит от количества кружочков в каждой цифре. В «9» один кружочек, в «8» — два, в «1» — ни одного, а, значит, 2581 = 2.
На этом всё. Вопросы в комментариях. Подписывайтесь на обновления блога в Twitter , RSS или по почте!
С уважением, Мышак Пётр!