jquery_mobile頁面動畫學習

時間 2019-11-17

原文原文鏈接

jQuery_mobile中的頁面切換可以使用data-transition屬性的鏈接或表單提交，jQuery_mobile庫中支持的有以下幾種：css

fade	默認。淡入到下一頁
flip	從後向前翻轉到下一頁
flow	拋出當前頁，進入下一頁
pop	像彈出窗口同樣進入下一頁
slide	從右到左滑動到下一頁
slidefade	從右到左滑動並淡入到下一頁
slideup	從下到上滑動到下一頁
slidedown	從上到下滑動到下一頁
turn	翻到下一頁
none	沒有切換效果

上面的全部效果支持後退行爲。例如，若是您想要頁面從左向右滑動，而不是從右向左滑動，請使用帶有 "reverse" 值的 data-direction 屬性。在後退按鈕上這是默認的。html

代碼：jquery

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>歡迎來到個人主頁</h1>
  </div>

  <div data-role="content">
    <p>點擊連接查看flip（翻轉）效果。 flip effect.</p>
    <a href="#pagetwo" data-transition="flip">翻轉到第二頁</a>//默認是從左到右的翻轉
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
 <a href="#" data-icon="back" data-rel="back">返回</a>//第二個頁面返回的時候，默認是從右到左的返回
    <h1>歡迎來到個人主頁</h1>
  </div>

  <div data-role="content">
    <p>點擊連接返回上一個頁面。<b>注意</b>: fade（淡入）效果是默認的</p>
    <a href="#pageone" data-transition="flip" data-direction="reverse">返回第一個頁面</a>//若是要鏈接跳轉返回，須要加data-direction="reverse"這個屬性，纔會有從右到左的返回，
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。