側滾動圖像，但圖像變化

我有一個標題，有一個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（唯一的區別bewteen其他文件是文件夾名稱。night，而不是day，反之亦然）：

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

來源

2011-11-09 Mythrillic

那究竟是什麼問題呢？滾動不起作用？或者它按預期工作，但更改樣式表不？你在哪裏調用'styleSwitcher（）'函數？問題：在窗口對象中緩存cssXPos有什麼特別的理由嗎？ – WTK

滾動不起作用。 'styleSwitcher（）'函數從相同的JavaScript文件運行，就像函數所在。 – Mythrillic

@WTK至於側面問題，我只是認爲它會提高性能。 – Mythrillic

所有r飛行，所以有幾個與你的側面滾動腳本問題：加載文檔之前

運行mvheader功能（我假設你的代碼是在外部js文件）
使用表達式：setInterval("mvheader()", 50)它會按預期工作，但是使用該語法歸結爲事實，即JavaScript必須將字符串解釋爲第一個參數。您可以使用setInterval(mvheader, 50)爲等效 - 你可以看到，你現在會通過函數作爲參數傳遞給的setInterval
定義toMove變量時，不使用「無功」的關鍵字 - 如預期在IE
污染全局範圍（window對象）與其他變量cssXPos和cssMaxWidth

我修改你的代碼，你可以在這裏檢查工作版本：http://jsfiddle.net/wtk_pl/ydJhr/4/。

它工作正常，但是我也創建了秒，更清潔的版本，不污染全局變量和新變量，並且應該執行得更好，因爲我將#header節點「緩存」在變量中，而不是在其上搜索每個迭代的mvheader()。看看這裏：http://jsfiddle.net/wtk_pl/ydJhr/9/

至於根據一天中的時間加載不同的CSS - 這是完全可以從JavaScript，但我會建議你在服務器端做（即在發送頁面內容之前確定並嵌入適當的CSS文件到用戶） - 爲什麼打擾客戶端腳本？

來源

2011-11-10 12:41:04 WTK

主題應該根據用戶時間而改變。但我想我可以用GeoIP做一些事情，並獲得用戶的時區，然後向他們發送正確的css文件。 – Mythrillic

側滾動圖像，但圖像變化

回答

相關問題