您现在的位置: 365建站网 > 建站教程 > jQuery Mobile 教程 > jQuery Mobile 过渡

jQuery Mobile 过渡

此节有 131 人学习过     参与评论

jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。

jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

注释:如需实现过渡效果,浏览器必须支持 CSS3 3D 转换:

浏览器支持

  • Internet Explorer 10 支持 3D 转换(更早的版本不支持)
  • Opera 仍然不支持 3D 转换

过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交:

<a href="#anylink" data-transition="slide">滑动到页面二</a>

下面的表格展示了可与 data-transition 属性一同使用的可用过渡:

过渡 描述 测试
fade 默认。淡入淡出到下一页。 测试
flip 从后向前翻动到下一页。 测试
flow 抛出当前页面,引入下一页。 测试
pop 像弹出窗口那样转到下一页。 测试
slide 从右向左滑动到下一页。 测试
slidefade 从右向左滑动并淡入到下一页。 测试
slideup 从下到上滑动到下一页。 测试
slidedown 从上到下滑动到下一页。 测试
turn 转向下一页。 测试
none 无过渡效果。 测试

提示:在 jQuery Mobile 中,淡入淡出效果在所有链接上都是默认的(如果浏览器支持)。

提示:以上所有效果同时支持反向动作,例如,如果您希望页面从左向右滑动,而不是从右向左,请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。

实例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

亲自试一试

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (131人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号