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