最新的Web开发教程
 

jQuery Mobile全视线


jQuery Mobile的包括,让你选择一个页面应该打开方式CSS3效果。


jQuery Mobile的过渡效果

jQuery Mobile的有各种关于如何转变从一个页面到下一个效果。

注意:要实现过渡效果,浏览器必须支持CSS3 3D变换:

12.0 10.0 16.0 4.0 15.0

在表中的数字指定第一个版本的浏览器完全支持3D变换。

过渡效果可以通过使用该数据转换属性被应用到任何链路或表单提交:

<a href="#anylink" data-transition="slide" >Slide to Page Two</a>

下表中显示了可以与两个网页和对话框的数据过渡属性用于提供转换:

过渡 描述 对于网页 对于对话框
fade 默认。 淡入到下一页 尝试一下 尝试一下
flip 翻转到下一个页面从后到前 尝试一下 尝试一下
flow 引发当前页面离开并且与下页 尝试一下 尝试一下
pop 去像一个弹出窗口下页 尝试一下 尝试一下
slide 滑动到下一个页从右到左 尝试一下 尝试一下
slidefade 从右滑向左和淡入淡出的下一个页面 尝试一下 尝试一下
slideup 幻灯片到下一个页面从底部到顶部 尝试一下 尝试一下
slidedown 滑动到下一个页面从上到下 尝试一下 尝试一下
turn 转向下一个页 尝试一下 尝试一下
none 没有过渡效果 尝试一下 尝试一下

褪色效果是默认在jQuery Mobile的所有链接(如果浏览器支持的话)。

提示:上面也都影响支持反向/向后的动作,例如,如果你想在页面滑动由左到右,而不是从右到左,使用数据方向属性值为"reverse"

<a href="#pagetwo" data-transition="slide" data-direction="reverse" >Slide</a>
试一试»