第二课 jqm从页面的滑动效果

最新推荐文章于 2015-08-27 14:49:11 发布

nick00221

最新推荐文章于 2015-08-27 14:49:11 发布

阅读量538

点赞数

分类专栏：前台 jquery mobile学习文章标签： jqm页面切换滑动

本文链接：https://blog.csdn.net/abcxuchuang123/article/details/41574797

版权

前台同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery mobile学习

2 篇文章 0 订阅

订阅专栏

两个页面之间跳转时，为了美观，可以实现从左到右的滑动，或从右到左的滑动。效果如下：

点击之后

运行之后可以看到页面转换时的滑动效果。

代码：

<body>
	<div data-role="page" id="pageone">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<p>hello world</p>
			<a href="#pagetwo" data-transition="slide">从左到右滑动</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>

	<div data-role="page" id="pagetwo">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<a href="#pageone" data-transition="slide" data-direction="reverse">从右到左滑动</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>
</body>

解释：

1、关键代码：data-transition="slide"表示超链接被点击时，滑动的方式切换页面。

2、默认是以从左到右的方式滑动，如果想从右到左，需加入data-direction="reverse"属性。

其他滑动效果：