amp-fx-flying-carpet

简介

amp-fx-flying-carpet 在固定高度的容器内显示其子元素。当用户滚动页面时，飞毯会显示更多的内容，在其子元素上滑动，就像透过页面上的一个窗口窥视一样。

设置

在头部导入 amp-fx-flying-carpet 组件。

<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

amp-fx-flying-carpet 元素必须放置在第一个视口之后，因此请确保在元素之前放置足够的内容以覆盖目标视口大小。下面的框是为了确保 amp-fx-flying-carpet 放置在第一个视口之后。

广告的飞毯

amp-fx-flying-carpet 可用于显示广告。使用 height 参数指定飞毯“窗口”的高度。

<div class="amp-flying-carpet-text-border">Advertising</div>
<amp-fx-flying-carpet height="300px">
  <amp-ad width="300" height="600" layout="fixed" type="doubleclick" data-slot="/35096353/amptesting/formats/flying_carpet">
  </amp-ad>
</amp-fx-flying-carpet>
<div class="amp-flying-carpet-text-border">Advertising</div>

图像的飞毯

amp-fx-flying-carpet 也可用于显示图像。

<amp-fx-flying-carpet height="300px">
  <amp-img src="/static/samples//img/landscape_lake_1280x857.jpg" width="1280" height="853" alt="an image">
  </amp-img>
</amp-fx-flying-carpet>

定位

amp-fx-flying-carpet 元素必须放置在最后一个视口之前，因此请确保在元素之后放置足够的内容以覆盖目标视口大小。

下面的框是为了确保 amp-fx-flying-carpet 放置在最后一个视口之前。

需要进一步解释？

如果此页面上的解释未能涵盖你的所有问题，请随时联系其他 AMP 用户，讨论你的具体使用案例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的长期参与者，但也欢迎你为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @kul3r4 编写