Блог

Главная - Вопросы по программированию - Как мне изменить фон на весь экран при обновлении?

Как мне изменить фон на весь экран при обновлении?

#php #javascript #jquery #css #server-side

#php #javascript #jquery #css #на стороне сервера

Вопрос:

Я хочу, чтобы фоновое изображение этой веб-страницы чередовалось с изображениями при обновлении.

Как я мог бы это сделать?

Offliberty делает это. Я просмотрел исходный код, но не могу в нем разобраться. Я узнал, что это делается с помощью сценариев на стороне сервера, и мой хост поддерживает это, и что скрипт под названием sizzle поддерживает веб-сайт Offliberty, но я просто в замешательстве, когда смотрю на код.

Комментарии:

1. Это можно сделать с помощью jQuery, но проще всего было бы использовать серверный скрипт. Можете ли вы использовать что-нибудь на стороне сервера — PHP, ASP.NET Perl, Python …?

Ответ №1:

Вы могли бы легко сделать это и на стороне клиента, если хотите. Создайте несколько классов в вашем css:

 backgr0 { background-image: url('images/somepic.jpg'); }
backgr1 { background-image: url('images/somepic.jpg'); }
backgr2 { background-image: url('images/somepic.jpg'); }
backgr3 { background-image: url('images/somepic.jpg'); }
backgr4 { background-image: url('images/somepic.jpg'); }

Затем в вашей функции jQuery ready:

 $(function(){
   var backnum = Math.floor(Math.random()*5);
   $('body').addClass("backgr"   backnum);
});

При необходимости замените body на #id div.

Ответ №2:

Лучше всего было бы сделать это на стороне сервера, мне кажется, вы используете PHP, поэтому я привожу вам пример на этом языке. Фоновое изображение меняется только при перезагрузке, поэтому логически разница должна быть в HTML, который клиент получает от сервера.

Вы должны использовать те же классы CSS, которые @DarthJDG предоставил для вас. Единственное отличие заключается в том, что вы будете подключать классы на сервере, а не на стороне клиента.

 $number_of_classes=7; //the number of background images you have
$which_one=rand(0, $number_of_classes-1); //let's choose a class

printf('<body class="backgr%s">', $which_one); //put this wherever you are printing body

Комментарии:

1. Большое спасибо. Я, кажется, понимаю php лучше, чем jquery, который, по сути, вообще ничего не представляет, но куда именно мне поместить две верхние строки?

2. @Toren Везде, где вы бы вывели свой body тег. Например, если у вас есть что-то вроде echo '<body>'; , замените это моим кодом.

3. Большое вам спасибо! Я понятия не имею, почему я просто не попробовал это. 🙂

4. @Toren Если вы нашли решение в любом из приведенных здесь ответов, обязательно отметьте его как ответ, нажав на галочку слева от ответа.

Ответ №3:

Когда вы пытаетесь выяснить, сделано ли что-то с помощью JavaScript или серверного кода, первое, что вы можете сделать, это полностью отключить JavaScript, перезагрузить страницу несколько раз и посмотреть, что произойдет.

К сожалению, в Offliberty по умолчанию все невидимо, поэтому он просто выглядит как пустой экран, когда нет JS. Тем не менее, все содержимое по-прежнему там, так что оно все равно будет работать.

Эти большие фоновые изображения применяются к #wrapper div, и когда я обновлял — даже с выключенным JS — это фоновое изображение менялось.

Похоже, что для этого они используют серверные материалы.

(Кроме того, как бы там ни было, Sizzle — это библиотека JavaScript, которая значительно упрощает выбор элементов. Это ничего не меняет для пользователя, это просто немного упрощает разработку.)

Ответ №4:

<div id=wrapper class=wrapper4> в css есть около 20 вариантов фона. Если вы не хотите использовать php asp или сторонний код. для этого можно написать javascript

 document.write ( '<div id=wrapper class=wrapper'   Math.floor(Math.random()*21)   '>');