1

我硬编码了一个 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

4

1 回答 1

2

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

  1. 切换最后两个脚本标签的顺序（创建图像init 后调用）
  2. s.refresh()添加图像后调用。
于 2013-09-26T08:07:09.857 回答