javascript - 动态创建 Skrollr 元素，滚动失败

Question

我硬编码了一个 Skrollr 演示页面，效果很好。硬编码数据标签很乏味，所以我开始动态创建 img div。但是现在我无法让它工作!我需要另一双眼睛来查看我的代码。我确定我忽略了一些简单的事情。

理想情况下，当您向下滚动时，图像应该看起来像动画(通过切换它们的可见性)，但 div 应该保持在页面上的固定位置。
http://moto.oakley.com
有一个很好的 Skrollr 实例。

这是JS运行前img div的样例

<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="" >

然后我有一个带有 for 循环的 JS 函数，它附加到 img div 并将数据标签递增 20。我认为我对 data-- 的使用不太正确。

一旦 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

Answer 1

Skrollr 不知道您的动态元素。两种选择

1. 交换最后两个脚本标签的顺序(调用 init 在图像创建后)
2. 添加图片后调用s.refresh()。