>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26074 个阅读者 刷新本主题
 * 贴子主题:  jQuery Mobile: 页面切换的过渡 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-15 18:04:06     消息  查看  搜索  好友  邮件  复制  引用

  

jQuery Mobile 页面切换之间的过渡

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

jQuery Mobile 页面切换效果

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

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

      
12.0 10.0 16.0 4.0 15.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 无过渡效果。


    
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 在 jQuery Mobile 的所有链接上,默认使用淡入淡出的效果(如果浏览器支持)。    


     提示:上面的所有效果支持后退行为。例如,如果您想要页面从左向右滑动,而不是从右向左滑动,请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。            

范例

       <a href="#pagetwo" data-transition="slide"

data-direction="reverse">切换</a>



程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-20 10:27:33 重新编辑]
  Java面向对象编程-->对象的生命周期
  JavaWeb开发-->JavaWeb应用入门(Ⅱ)
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->Java反射机制
  精通Spring-->Vue组件开发高级技术
  Vue3开发-->虚拟DOM和render()函数
  axios 发 post 请求,后端接收不到参数的解决方案
  vue3 composition API的用法
  07、手把手教Vue--路由「Vue-router」 - TigerChain
  在Typescript脚本中使用axios
  vue的CSS过渡和动画范例
  Vue之引用第三方JS插件,CKPlayer使用
  前端面试题及答案汇总
  Thinking In Vue:vue指令的封装
  JavaScript Array 对象
  JavaScript Date 对象
  CSS处理透明/不透明图像
  CSS padding(填充)
  JavaScript prototype(原型对象)
  JavaScript 正则表达式
  jQuery Mobile 简介
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。