複製這一JavaScript動畫效果

我已經試過各種方法試圖在該網站提到的這個動畫的副本：複製這一JavaScript動畫效果

http://visitbruges.be/

我注意到，在源頭上線103是它開始的動畫效果：

<div id="sunmoon"> 
    <div class="star" id="s1"></div> 
    <div class="star" id="s2"></div> 
    <div class="star" id="s3"></div> 
    <div class="star" id="s4"></div> 
    <div class="star" id="s5"></div> 
    <div class="star" id="s6"></div> 
    <div id="sun"><div></div></div> 
    <div id="moon"><div></div></div> 
</div>

只有兩個.js文件，但沒有一個顯示爲什麼它仍然調用父網站的圖像。我嘗試複製粘貼源代碼，然後將所有圖像/ css/js放置在與網站相同的結構中，但這不起作用。動畫中的圖像仍然來自在線網站。通過js文件中的每一行代碼查看，但我仍然無法弄清楚。嘗試Cmd + S並保存它，但它保存了代碼，它不應該如此運作。

當我完全離線時，圖像不會被調用，但是當我上網時，圖像出現在本地主機副本中，並且它以它應該的方式工作。這就像JavaScript編碼不知何故，我無法弄清楚在哪裏和如何。

任何線索都會非常有幫助。謝謝。

來源

2013-07-26 nikita gupta

嘗試一下自己，也許只是谷歌的複製粘貼腳本，或者至少嘗試理解鏈接頁面上的腳本（例如，設置斷點是一個好主意） –

使用Firefox Inspector進行的一些檢查表明，星星，太陽和月亮有一個叫做「旋轉」的CSS動畫。此外，圖像由'/ images /'的'background'屬性加載。 – Pietu1998

@EliasVanOotegem 我的確嘗試瞭解腳本。我經歷了js中的每一行代碼，但我仍然無法理解圖像是如何從在線網站調用的。謝謝。 –

在他們的style.css中，他們的圖像看起來像星星一樣被定義爲背景圖像。許多網頁設計師似乎更喜歡重度動畫的圖像元素，爲它們使用CSS和background-image: url(...)，而不是將它們包括爲<img>元素。其中一個原因，我不確定是否是這種情況，它允許「spriting」，其中有一個圖像，其上有大約15個重要圖形，然後使用CSS告訴<div>顯示特定的寬度/該圖像在某個x/y偏移處的高度。它還允許您通過向元素添加/刪除類來更改某些圖像或該圖像的特定Sprite框。

希望有所幫助。

來源

2013-07-26 13:56:25 Katana314

謝謝。但是，我正在談論belfort.png，酒店。png，gentpoort.png等位於「images/buildings」文件夾中，始終從父ONLINE網站加載，儘管我已經複製了本地主機中的所有內容。我已經通過zomer.min.js鏈接到圖像和.css文件，但無法理解爲什麼它仍然從在線網站調用。他們如何做到這一點？所有其他文件都從本地主機中調用。 –

動畫在CSS中完成。

例如紡紗星動畫與此CSS代碼做過的style.css

#header #sunmoon .star { 
    animation: 5s linear 0s normal none infinite spin; 
    background: url("../images/star.png") no-repeat scroll center top transparent; 
    height: 26px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 26px; 
}

注意，明星實際上是一個背景圖像：url("../images/star.png") ，和旋轉動畫與animation CSS規則完成。

來源

2013-07-26 13:57:20

謝謝。我無法得到的是位於「images/buildings」文件夾中的建築物和其他圖像，例如belfort.png，hotel.png，gentpoort.png等，始終從父網站加載，儘管我已經複製了所有內容在本地主機。在http：// localhost/visitbruges /中創建了一個網站的副本後，圖像被從http://visitbruges.be/images/buildings/gentpoort.png等調用。我已經通過了zomer.min.js有鏈接到圖像和.css文件，但不明白爲什麼它仍然從在線網站調用。 –

複製這一JavaScript動畫效果

回答

相關問題