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 撰寫