Jquery Mobile 对页面进行切换时可添加效果

737 views

<!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>点击链接来查看淡入淡出效果。</p>
<a href=”#pagetwo” data-transition=”fade”>转到页面二</a>
</div>

<div data-role=”footer”>
<h1>页脚文本</h1>
</div>
</div>

<div data-role=”page” id=”pagetwo”>
<div data-role=”header”>
<h1>欢迎访问我的主页</h1>
</div>

<div data-role=”content”>
<p>点击链接返回页面一。<b>注释:</b>:fade 是默认效果。</p>
<a href=”#pageone”>返回页面一</a>
</div>

<div data-role=”footer”>
<h1>页脚文本</h1>
</div>
</div>

</body>
</html>

淡入淡出效果:
<a href=”#pagetwo” data-transition=”fade”>转到页面二</a>

fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面,引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。

 

如果您觉得这篇文章对您有帮助,欢迎继续关注本站!!!我要赞助本站>>>

One comment

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注