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>