사이드 스크롤 이미지이지만 이미지가 변경됩니다.

Question

저는 50ms마다 1px 속도로 사이드 스크롤 할 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는 (유일한 차이점 :

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"; 
} 

자바 스크립트가 시간에 따라 다른 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

모두 r 당신의 횡 스크롤 스크립트 문제의 부부가 있었다 ight : 그래서, 문서가로드되기 전에

• mvheader 기능을 실행하는 표현식을 사용하여
• (난 당신의 코드가 JS 외부 파일에 있었다 있으리라 믿고있어) : setInterval("mvheader()", 50) 그 구문을 사용하여 사실로 종결, 자바 스크립트는 첫 번째 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를로드하는 방법 - 자바 스크립트에서 완전히 수행 할 수 있지만, 서버 측에서 수행하는 것이 좋습니다 (페이지 내용을 보내기 전에 적절한 CSS 파일을 결정하고 임베드하는 것을 의미 함). 사용자에게) - 왜 클라이언트 측 스크립트에 문제가 있습니까?