jQuery Mobile的页面过度效果

最新推荐文章于 2019-07-20 22:09:43 发布
最新推荐文章于 2019-07-20 22:09:43 发布
阅读量509 收藏 2
点赞数
分类专栏： 跨平台开发 文章标签： jQuery Mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IOS_dashen/article/details/79404531
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面跳转效果</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 跳转效果的集合页面-->
<div data-role="page" id="effect_list">
    <div data-role="header">
        <h1>页面的跳转效果测试</h1>
    </div>
    <div data-role="content">
        <div>
            <a href="#page_fade" data-role="button" data-transition="fade">fade:默认，淡入淡出到下一个页面</a>
            <a href="#page_flip" data-role="button" data-transition="flip">flip:从后向前翻动到下一个页面</a>
            <a href="#page_flow" data-role="button" data-transition="flow">flow:抛出当前页面，引入下一个页面</a>
            <a href="#page_pop" data-role="button" data-transition="pop">pop:像弹出窗口那样跳转到下一个页面</a>
            <a href="#page_slide" data-role="button" data-transition="slide">slide:从右向左滑动到下一个页面</a>
            <a href="#page_slidefade" data-role="button" data-transition="slidefade">slidefade:从右向左滑动并且淡入到下一个页面</a>
            <a href="#page_slideup" data-role="button" data-transition="slideup">slideup:从下到上滑动到下一个页面</a>
            <a href="#page_slidedown" data-role="button" data-transition="slidedown">slidedown:从上到下滑动到下一个页面</a>
            <a href="#page_turn" data-role="button" data-transition="turn">turn:转向下一个页面</a>
            <a href="#page_none" data-role="button" data-transition="none">none:无过渡效果</a>
        </div>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>

<div data-role="page" id="page_fade">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="fade" data-direction="reverse" data-icon="back">返回</a>
        <h1>fade</h1>
    </div>
    <div data-role="content">
        <p>这是fade的淡入淡出效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>

<div data-role="page" id="page_flip">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="flip" data-direction="reverse" data-icon="back">返回</a>
        <h1>flip</h1>
    </div>
    <div data-role="content">
        <p>这是fade的从后向前翻动到下一个页面的效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>

<div data-role="page" id="page_flow">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="flow" data-direction="reverse" data-icon="back">返回</a>
        <h1>flow</h1>
    </div>
    <div data-role="content">
        <p>这是flow的抛出当前页面引入下一个页面的效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_pop">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="pop" data-direction="reverse" data-icon="back">返回</a>
        <h1>pop</h1>
    </div>
    <div data-role="content">
        <p>这是pop的弹出框效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_slide">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="slide" data-direction="reverse" data-icon="back">返回</a>
        <h1>slide</h1>
    </div>
    <div data-role="content">
        <p>这是slide的从右向左的滑动进入下一个页面的效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_slidefade">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="slidefade" data-direction="reverse" data-icon="back">返回</a>
        <h1>slidefade</h1>
    </div>
    <div data-role="content">
        <p>这是slidefade的从右向左并且带淡入淡出效果进入下一个页面</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_slideup">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="slideup" data-direction="reverse" data-icon="back">返回</a>
        <h1>slideup</h1>
    </div>
    <div data-role="content">
        <p>这是slideup的从下到上的效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_slidedown">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="slidedown" data-direction="reverse" data-icon="back">返回</a>
        <h1>slidedown</h1>
    </div>
    <div data-role="content">
        <p>这是slidedown从下到上的效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_turn">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="turn" data-direction="reverse" data-icon="back">返回</a>
        <h1>turn</h1>
    </div>
    <div data-role="content">
        <p>这是turn的转向效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
<div data-role="page" id="page_none">
    <div data-role="header">
        <a href="#effect_list" data-role="button" data-transition="none" data-direction="reverse" data-icon="back">返回</a>
        <h1>none</h1>
    </div>
    <div data-role="content">
        <p>none的无效果</p>
    </div>
    <div data-role="footer">
        <h6>Copyright @2018 by liweiqing</h6>
    </div>
</div>
</body>

维庆
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现切换页面过渡动画效果
10-23
是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下
jquery Mobile入门—多页面切换示例学习
10-27
总的来说，jQuery Mobile的多页面切换功能结合其内置的动画效果和组件，为开发响应式、交互性强的移动应用提供了一个强大且易用的工具集。通过理解并熟练运用这些概念和技术，开发者可以创建出既美观又流畅的移动...
15个CSS3和jQuery的超棒页面过渡效果教程
tyygming的专栏
07-31 235
日期：2013-7-31  来源：GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发。通过CSS3和jQuery，设计员和开发者不需要太多的精力或编码，就可以创造出非常 美丽令人叹惊的效果，同时还可以令你快速完成任务。CSS3和jQuery最 大的方便之处在于网上有大量的不同元素效果的展示教程，这一点使得学习新技巧 和创造一些很棒的内容更加轻松。网上有很多页面过渡效...
jQuery Mobile 过渡效果
杨鑫的博客
12-22 296
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。 注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换： 浏览器支持 Internet Explorer 10 支持 3D 转换（更早的版本不支持） Opera 仍然不支持 3D 转换 过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交： 滑动到页面二 下面的表格展示了
jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
weixin_33754913的博客
03-10 120
1.页面切换（data-transition） 地址：http://api.jquerymobile.com/data-attribute/ data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 褪色 | |翻转||流流行幻灯片| | | s...
基于Jquery的页面过渡效果(原创)
weixin_30405421的博客
07-20 1430
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta content="width=device-width, initial-scale=1.0, m...
JQueryMobile UI 汇总
08-01
虽然 jQuery Mobile 提供了许多便利，但过度依赖可能导致性能下降。为了优化，应遵循以下原则： 1. **减少 DOM 元素**：尽量保持页面结构简洁，减少不必要的元素。 2. **延迟加载（懒加载）**：对于大型应用，可以...
JqueryMobile快速上手教程－实训任务书05-页面预加载和缓存-班级通知页.zip
03-25
在“JqueryMobile快速上手教程”中，我们将探讨如何利用页面预加载和缓存技术来优化用户体验，特别是以“班级通知页”为例，展示其实战应用。 **页面预加载** 页面预加载是 jQuery Mobile 提供的一项特性，其目的是...
jQuery Mobile快速入门
05-25
- **性能优化**：合理使用 AJAX 加载内容、避免过度使用动画效果等都是提高应用性能的有效手段。 - **适配性**：确保应用能够适应不同尺寸和分辨率的屏幕，为用户提供一致的体验。 - **可访问性**：遵循 WCAG 标准，...
JqueryMobile入门基础附源码
07-12
虽然 JQuery Mobile 很强大，但过度使用数据属性和组件可能会导致性能下降。为了优化，可以： 1. **避免全局事件**：尽量使用局部事件绑定，减少事件监听器的数量。 2. **延迟初始化**：使用 `mobileinit` 事件延迟...
HTML5 WEB页面过度效果源码集合
05-10
HTML5 WEB页面过度效果源码集合 中间包过二十种页面过渡效果，这事一个例子程序，嵌入使用前注意导入UI包。
jQuery实现的加载页面过渡效果
我们不生产任何代码 只做代码的搬运工
04-16 5366
示例1：DIV加载图片 $(function(){ $('#img').oLoader({ waitLoad: true, fadeLevel: 0.9, backgroundColor: '#fff', style:0, image: 'loader.gif' }); }); 示例2：Ajax加载页面 这是一个测试页面！
Jquery Mobile转场特效之slide | 小小iPhone开发
12-05 111
Jquery Mobile转场特效之slide | 小小iPhone开发 Jquery Mobile转场特效之slide | 小小iPhone开发2012Jquery Mobile转场特效之slide作者：小小 发布：2012-12-12 14:03 分类：...
jQuery Mobile基础02----jQuery Mobile Widgets-page(跳转效果
翟浩浩Android专栏
10-07 307
html> html> head lang="en"> meta charset="UTF-8"> meta name="viewport" content="width=device-width，initial-scale=1.0"> title>title> script src="jquery-2.1.4.min.js">script>
jQuery Mobile 页面过渡
berained的专栏
02-21 942
可选择页面打开方式的css效果 （即如何从一页过渡到下一页的效果）     使用： data-transition="slide">滑动到页面二                fade：淡入淡出到下一页（所有链接上的默认效果）               flip：从后向前翻动到下一页               flow：抛出当前页面，引入下一页               pop：像
jquery mobile如何实现滑动屏幕跳转页面
橙子9102
04-26 2658
$("#detail_center").bind("swipeleft", function(e){$.mobile.changePage ('index.html', 'fade', false, false);}); 首先swipeleft api如下： swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发 swipeleft（左划）：划动事件
Jquery Mobile实现页面切换
weixin_34160277的博客
04-19 253
2019独角兽企业重金招聘Python工程师标准>>> ...
页面过渡效果
jxyuhua的地盘
08-30 1579
首先用Dreamweaver打开页面，然后单击菜单中的Insert/Head/Meta（插入/文件头标签/Meta），会弹出如下图所示的对话框。在对话框中的Attribute选项的下拉列表中选HTTP-equivalent选项，在Value：中键入Page-Enter，(Page-exit)表示进入网页时有网页过渡效果。在Content:中键入Revealtrans(Duration=4,Tr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值