文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML标记上的Parallax.js

问HTML标记上的Parallax.js
EN

Stack Overflow用户

提问于 2017-03-19 11:24:14

回答 1查看 397关注 0票数 0

我试图在html Parallax.js标记上使用body。

https://pixelcog.github.io/parallax.js/

https://github.com/pixelcog/parallax.js/

我向主体添加了jQuery、视差路径和数据参数，但没有显示。

我试过把js放在头部和脚上。我哪里出问题了？

https://jsfiddle.net/kyttft92/

<body data-parallax="scroll" data-image-src="http://i.imgur.com/yXmsCmA.jpg">
  <ul>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
  </ul>
</body>

将类添加到body并使用jQuery手动调用也没有任何效果。

$('.parallax-window').parallax({imageSrc: 'http://i.imgur.com/yXmsCmA.jpg'});

这里还有一个cdnjs文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-19 12:17:57

显然，您的错误与不加载资源或语法错误无关，而与不读取文档并试图以设计它不适合的方式使用文档无关：

来自Under The Hood：

parallax.js将为文档正文开头的每个视差图像创建一个固定位置元素。这个镜像元素将位于其他元素的后面，并匹配其目标对象的位置和尺寸。

这基本上意味着你不能视差<body>，因为它被用作效果的容器。(它将尝试创建<body>的镜像，并将其作为<body>的子代放置。这说得通吗？)

只需将所有内容放在一个容器中，就可以使用parallax.js。

补充说明:根据的评论，parallax.js目前需要2.2.4或更低的jQuery才能正常工作。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42885986

复制

相似问题

问HTML标记上的Parallax.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML标记上的Parallax.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML标记上的Parallax.js
EN