我对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
答案 0 :(得分:2)
Skrollr不了解您的动态元素。两个选项
init
)s.refresh()
。