动态创建Skrollr元素,滚动失败

时间:2013-09-26 01:44:56

标签: javascript parallax skrollr

我对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。我认为我对数据的使用 - 不太正确。

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

1 个答案:

答案 0 :(得分:2)

Skrollr不了解您的动态元素。两个选项

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