阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Mobile 过渡

      jQuery Mobile 过渡


      jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。


      jQuery Mobile 页面切换效果

      jQuery Mobile 提供了各种页面切换到下一个页面的效果。

      **注意:**为了实现页面切换效果,浏览器必须支持 CSS3 3D 切换:

      ChromeIEFFsafari
      12.010.016.04.0

      表格中的数字为支持 3D 旋转的最小浏览器版本号。

      页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单:

      页面切换效果可被应用于任何使用 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>
      
      目录
      目录