jQuery Mobile 快速入门之动画过渡

最新推荐文章于 2022-05-06 07:52:57 发布

Tim_gar

最新推荐文章于 2022-05-06 07:52:57 发布

阅读量461

点赞数

jquery mobile 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

data-transation：页面的过渡效果

fade：缺省默认，淡入淡出效果

flip：从后向前翻动

flow：抛出当前页，进入下一页

pop：像弹窗效果样弹出新页面

slide：从右向左滑动进入新页面

slidefade：从右向左滑动并淡入到新页面

slideup：从下到上滑动并进入新页面

slidedown：从上到下滑动并进入新页面

turn：转向新页面

none：无过渡效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/imp.css"/>
		<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://cdn.gbtags.com/jquery-mobile/1.3.2/jquery.mobile.min.js"></script>
	</head>
	<body>
		<div data-role="page" id="pageone">
		  <div data-role="header">
		    <h1>我是页面1</h1>
		  </div>
		  <div data-role="content">
		    <a href="#pagetwo" data-transition="slidedown" data-role="button">点我跳到页面2</a>
		  </div>
		  <div data-role="footer">
		    <h3>CopyRight</h3>
		  </div>
		</div>
		<div data-role="page" id="pagetwo">
		  <div data-role="header">
		    <h1>我是页面2</h1>
		  </div>
		  <div data-role="content">
		    <a href="#pageone" data-transition="flip" data-role="button">点我跳到页面1</a>
		  </div>
		  <div data-role="footer">
		    <h3>CopyRight</h3>
		  </div>
		</div>
	</body>
</html>

css文件：imp.css

@import url("http://cdn.gbtags.com/jquery-mobile/1.3.2/jquery.mobile.min.css");

Tim_gar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery Mobile 快速入门之动画过渡

data-transation：页面的过渡效果fade：缺省默认，淡入淡出效果flip：从后向前翻动flow：抛出当前页，进入下一页pop：像弹窗效果样弹出新页面slide：从右向左滑动进入新页面slidefade：从右向左滑动并淡入到新页面slideup：从下到上滑动并进入新页面slidedown：从上到下滑动并进入新页面turn：转向新页面none：无过
复制链接

扫一扫