Блог

У меня есть заголовок с фоновым изображением css, которое я хочу прокручивать в сторону со скоростью 1 пиксель каждые 50 мс. Однако фоновое изображение меняется в зависимости от времени на компьютере пользователя, и я не могу понять, как я буду это делать. Я написал код для самой боковой прокрутки, но больше ничего.

Javascript, используемый для боковой прокрутки (больше ничего):

 setInterval("mvheader()",50);
function mvheader () {
window.cssXPos=window.cssXPos 1;
if (window.cssXPos>=window.cssMaxWidth) {
window.cssXPos=0;
}
toMove=document.getElementById("header");
toMove.style.backgroundPosition=window.cssXPos "px 0px";
}
  

Раньше JavaScript использовал другой файл css в зависимости от времени:

 function styleSwitcher() {
  var currentTime = new Date().getHours();
  if (0 <= currentTimeamp;amp;currentTime < 6) {
   document.write("<link rel='stylesheet' href='css/night.css' type='text/css'>");
  }
  if (6 <= currentTimeamp;amp;currentTime < 18) {
   document.write("<link rel='stylesheet' href='css/day.css' type='text/css'>");
  }
  if (18 <= currentTimeamp;amp;currentTime <= 24) {
   document.write("<link rel='stylesheet' href='css/night.css' type='text/css'>");
  }
}

styleSwitcher();
  

CSS (единственное отличие от других файлов — это название папки. ночь вместо дня и наоборот):

 #header {
background-image:url(../img/day/tile.png);
background-repeat:repeat-x;
position:absolute;
height:100px;
width:100%;
top:0;
left:0;
z-index:9;
}
  

Хорошо, итак, было несколько проблем с вашим скриптом боковой прокрутки:

• запуск функции mvheader перед загрузкой документа (я предполагаю, что ваш код был во внешнем файле js)
• использование выражения: setInterval("mvheader()", 50) это будет работать так, как ожидалось, однако использование этого синтаксиса сводится к тому, что javascript должен интерпретировать строку, переданную в качестве первого аргумента. Вы можете использовать setInterval(mvheader, 50) как эквивалент — как вы можете видеть, теперь вы бы передали функцию в качестве параметра в setInterval
• не используется ключевое слово «var» при определении переменной ToMove — это не будет работать должным образом в IE
• загрязнение глобальной области видимости (объекта window) дополнительными переменными cssXPos и cssMaxWidth

Я изменил ваш код, и вы можете проверить рабочую версию здесь:http://jsfiddle.net/wtk_pl/ydJhr/4 /.

Оно работает нормально, однако я также создал вторую, более чистую версию, которая не загрязняет глобальную область новыми переменными и должна работать лучше, потому что я «кэширую» #header узел в переменной, а не ищу его на каждой итерации mvheader() . Проверьте это здесь: http://jsfiddle.net/wtk_pl/ydJhr/9 /

Что касается загрузки разных css в зависимости от времени суток — это полностью выполнимо из javascript, однако я бы рекомендовал вам сделать это на стороне сервера (что означает определение и внедрение правильного файла css перед отправкой содержимого страницы пользователю) — зачем беспокоить этим скрипт на стороне клиента?