VeryOK建站教程

jQuery Mobile 過渡

jQuery Mobile 包含了允許您選擇頁面打開方式的 CSS 效果。

jQuery Mobile 過渡效果

jQuery Mobile 擁有一系列關于如何從一頁過渡到下一頁的效果。

注釋:如需實現過渡效果,瀏覽器必須支持 CSS3 3D 轉換:

瀏覽器支持

  • Internet Explorer 10 支持 3D 轉換(更早的版本不支持)
  • Opera 仍然不支持 3D 轉換

過渡效果可應用于任意鏈接或通過使用 data-transition 屬性進行的表單提交:

<a href="#anylink" data-transition="slide">滑動到頁面二</a>

下面的表格展示了可與 data-transition 屬性一同使用的可用過渡:

過渡 描述 測試
fade 默認。淡入淡出到下一頁。 測試
flip 從后向前翻動到下一頁。 測試
flow 拋出當前頁面,引入下一頁。 測試
pop 像彈出窗口那樣轉到下一頁。 測試
slide 從右向左滑動到下一頁。 測試
slidefade 從右向左滑動并淡入到下一頁。 測試
slideup 從下到上滑動到下一頁。 測試
slidedown 從上到下滑動到下一頁。 測試
turn 轉向下一頁。 測試
none 無過渡效果。 測試

提示:在 jQuery Mobile 中,淡入淡出效果在所有鏈接上都是默認的(如果瀏覽器支持)。

提示:以上所有效果同時支持反向動作,例如,如果您希望頁面從左向右滑動,而不是從右向左,請使用值為 "reverse" 的 data-direction 屬性。在后退按鈕上是默認的。

實例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動</a>

親自試一試

江西时时彩交易时间