Question

我有一个带有css背景图像的标题，我想以每50ms 1px的速率左右滚动。但是，背景图像会根据用户计算机上的时间而变化，而我无法理解如何执行此操作。我确实为侧滚动本身编写了代码，但没有别的。

用于侧滚动的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 <= currentTime&&currentTime < 6) {
   document.write("<link rel='stylesheet' href='css/night.css' type='text/css'>");
  }
  if (6 <= currentTime&&currentTime < 18) {
   document.write("<link rel='stylesheet' href='css/day.css' type='text/css'>");
  }
  if (18 <= currentTime&&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;
}

Answer 1

好吧，你的横向滚动脚本有几个问题：

在加载文档之前运行mvheader函数（我假设你的代码在外部js文件中）
使用表达式：setInterval("mvheader()", 50)它会按预期工作，但是使用该语法归结为事实，javascript必须解释作为第一个arguemnt传递的字符串。您可以使用setInterval(mvheader, 50)作为等价物 - 如您所见，您现在将函数作为参数传递给 setInterval
在定义toMove变量时不使用“var”关键字 - 它在IE中无法正常工作
使用其他变量cssXPos和cssMaxWidth污染全局范围（窗口对象）

我修改了您的代码，您可以在此处查看工作版本：http://jsfiddle.net/wtk_pl/ydJhr/4/。

它工作正常，但我也创建了秒，更清洁的版本，不会使用新变量污染全局范围，应该执行得更好，因为我在变量中“缓存”#header节点，而不是搜索适用于mvheader()的每次迭代。请在此处查看：http://jsfiddle.net/wtk_pl/ydJhr/9/

关于根据一天中的时间加载不同的css - 这完全可以通过javascript实现，但是我建议你在服务器端执行此操作（意味着在向用户发送页面内容之前确定并嵌入正确的css文件） - 为什么要打扰那个客户端脚本？

侧滚动图像，但图像改变

1 个答案: