<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面跳转效果</title>
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 跳转效果的集合页面-->
<div data-role="page" id="effect_list">
<div data-role="header">
<h1>页面的跳转效果测试</h1>
</div>
<div data-role="content">
<div>
<a href="#page_fade" data-role="button" data-transition="fade">fade:默认,淡入淡出到下一个页面</a>
<a href="#page_flip" data-role="button" data-transition="flip">flip:从后向前翻动到下一个页面</a>
<a href="#page_flow" data-role="button" data-transition="flow">flow:抛出当前页面,引入下一个页面</a>
<a href="#page_pop" data-role="button" data-transition="pop">pop:像弹出窗口那样跳转到下一个页面</a>
<a href="#page_slide" data-role="button" data-transition="slide">slide:从右向左滑动到下一个页面</a>
<a href="#page_slidefade" data-role="button" data-transition="slidefade">slidefade:从右向左滑动并且淡入到下一个页面</a>
<a href="#page_slideup" data-role="button" data-transition="slideup">slideup:从下到上滑动到下一个页面</a>
<a href="#page_slidedown" data-role="button" data-transition="slidedown">slidedown:从上到下滑动到下一个页面</a>
<a href="#page_turn" data-role="button" data-transition="turn">turn:转向下一个页面</a>
<a href="#page_none" data-role="button" data-transition="none">none:无过渡效果</a>
</div>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_fade">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="fade" data-direction="reverse" data-icon="back">返回</a>
<h1>fade</h1>
</div>
<div data-role="content">
<p>这是fade的淡入淡出效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_flip">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="flip" data-direction="reverse" data-icon="back">返回</a>
<h1>flip</h1>
</div>
<div data-role="content">
<p>这是fade的从后向前翻动到下一个页面的效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_flow">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="flow" data-direction="reverse" data-icon="back">返回</a>
<h1>flow</h1>
</div>
<div data-role="content">
<p>这是flow的抛出当前页面引入下一个页面的效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_pop">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="pop" data-direction="reverse" data-icon="back">返回</a>
<h1>pop</h1>
</div>
<div data-role="content">
<p>这是pop的弹出框效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_slide">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="slide" data-direction="reverse" data-icon="back">返回</a>
<h1>slide</h1>
</div>
<div data-role="content">
<p>这是slide的从右向左的滑动进入下一个页面的效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_slidefade">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="slidefade" data-direction="reverse" data-icon="back">返回</a>
<h1>slidefade</h1>
</div>
<div data-role="content">
<p>这是slidefade的从右向左并且带淡入淡出效果进入下一个页面</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_slideup">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="slideup" data-direction="reverse" data-icon="back">返回</a>
<h1>slideup</h1>
</div>
<div data-role="content">
<p>这是slideup的从下到上的效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_slidedown">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="slidedown" data-direction="reverse" data-icon="back">返回</a>
<h1>slidedown</h1>
</div>
<div data-role="content">
<p>这是slidedown从下到上的效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_turn">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="turn" data-direction="reverse" data-icon="back">返回</a>
<h1>turn</h1>
</div>
<div data-role="content">
<p>这是turn的转向效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
<div data-role="page" id="page_none">
<div data-role="header">
<a href="#effect_list" data-role="button" data-transition="none" data-direction="reverse" data-icon="back">返回</a>
<h1>none</h1>
</div>
<div data-role="content">
<p>none的无效果</p>
</div>
<div data-role="footer">
<h6>Copyright @2018 by liweiqing</h6>
</div>
</div>
</body>
jQuery Mobile的页面过度效果
最新推荐文章于 2019-07-20 22:09:43 发布