動態創建Skrollr元素，滾動失敗

我硬編碼了一個Skrollr演示頁面，效果很好。硬編碼的數據標籤是乏味的，所以我去動態創建img div。但現在我無法讓它工作！我需要另一組眼睛來看看我的代碼。我確定我忽視了一些簡單的事情。

理想情況下，當您向下滾動時，圖像應該顯示爲動畫（通過切換其可見性），但div應該保持在頁面上的固定位置。
http://moto.oakley.com
有一個Skrollr在行動中的好例子。動態創建Skrollr元素，滾動失敗

這裏是IMG的div的樣本JS運行

<img data--10000-top="display:block;" data-1-top="display:none;" data-anchor-target="#bps_ux" data-src="images/bps/bps0001.jpg" src="images/bps/bps0001.jpg" class="frame preload skrollable skrollable-after" style="display: block;" alt="" >

在那之前我有一個JS的功能與一個for循環，追加到IMG的div和20遞增數據標籤，我認爲我的使用數據 - 並不完全正確。

一旦JS運行的div看起來像這樣，但與75圖像。

<img class="frame preload" src="images/bps/bps0001.jpg" data-src="images/bps/bps0001.jpg" data-anchor-target="#bps_ux" data-20-top="display:block;" data-0-top="display:none;" alt="bpsSprite frame 0001"> 
<img class="frame preload" src="images/bps/bps0002.jpg" data-src="images/bps/bps0002.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--0-top="display:block;" data--20-top="display:none;" alt="bpsSprite frame 0002"> 
<img class="frame preload" src="images/bps/bps0003.jpg" data-src="images/bps/bps0003.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--20-top="display:block;" data--40-top="display:none;" alt="bpsSprite frame 0003">

下面是完整的代碼我測試環節
http://retropunk.com/files/bps-skrollr/

感謝您的任何提示
- P

來源

2013-09-26 Retropunk

請在問題中顯示您的代碼（而不是代碼鏈接到網站），並告訴我們爲什麼它不能正常工作以及它的期望是什麼。 – Syon

@Syon好的，我更新了問題，以便更清楚。感謝您的幫助 – Retropunk

Skrollr不知道你的動態元素。兩個選項

交換機最後兩個腳本標記的順序（調用init後圖像已創建）
呼叫s.refresh()加入之後的圖像。

來源

2013-09-26 08:07:09 Prinzhorn

我甚至沒有注意到我在映像加載之前初始化Skrollr！ DOH！動態腳本現在就像一種魅力！真棒！ – Retropunk

謝謝你拯救我的生命 – tom10271

動態創建Skrollr元素，滾動失敗

回答

相關問題