div模拟页面切换

最新推荐文章于 2024-04-11 05:37:43 发布

zhuyangxing

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量2.7k

点赞数 1

分类专栏： js html javaScript 文章标签： html5 安卓

本文链接：https://blog.csdn.net/zhuyangxing/article/details/47452129

版权

本文介绍如何在Web端利用HTML5实现浏览器内的页面快速切换效果，特别适合用于安卓应用的壳内，通过H5技术构建App。设计思路是使用多个div模拟页面，通过显示和隐藏实现页面切换，类似jQuery Mobile的方法。此外，还讨论了如何添加滑动切换的动画效果。

摘要由CSDN通过智能技术生成

web端实现浏览器的快速页面切换（特别适用于android做壳，内部用h5来实现的app）

设计思路：

多个div每个div单独占用一整页需要跳页时使用div的显示（新页）和隐藏（旧页）即可。

经测试隐藏div(页)与显示div(页)之间的事件并不会相互影响

其实设计思路和jqm（jqueryMobile）设置思路一致

jqm里面是以data-role="page"来表明这是一个页面级的div

详细可参考html代码：

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>层次关系</title>
		<link href="css/test.css" rel="stylesheet">
		<script language="JavaScript" src="js/jquery-2.1.3.min.js"></script>
		<script language="JavaScript" src="js/test.js"></script>
	</head>

	<body>
		<div class="page1 page" id="page1">
			这里是第一页