jQuery Mobile 页面切换动画的使用（data-transition）

最新推荐文章于 2024-02-14 09:08:31 发布
最新推荐文章于 2024-02-14 09:08:31 发布
阅读量4.6k 收藏
点赞数
分类专栏： 移动web
页面中页面切换动画：
jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面，可以定义多个page，切换时直接使用超链接就可以了。
<body>
<div   data-role="page" id="main" data-transition="pop"> 
<a   href="#page2" >链接2</a>
</div>

<div   data-role="pag" id="page2"> 
</div>
</body>
系统默认显示page的内容，不显示page2的内容，点击链接后切换到page2的内容。通过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动，淡出，弹出，反转等动画。
如果需要转到的HTML是其他链接，不是内部page，需要加上rel='external'属性，此时动画效果无效。
狼之血舞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery html5手机端翻书效果_手指滑动书本翻页效果代码
03-07
jquery html5手机端翻书效果_手指滑动书本翻页效果代码
jQuery书本翻页动画 支持手机触屏
08-23
之前我们介绍过很多款功能各异的书本翻页动画了，比如最近刚分享的适配移动端的HTML5电子书翻页动画特效和很早前分享的CSS3书本翻页动画。这次给大家带来另外一个jQuery书本翻页动画插件，它的特点是支持移动端的触屏翻页，效果非常不错。
jQuery Mobile页面转场data-transition
热门推荐
albert的专栏
10-23 1万+
页面转场 Page transitions Jquery Mobile框架内置了一套基于css的页面转场效果，你可以给任何通过ajax对象或页面添加。 给链接添加data-transition属性，可以设定自定义的页面转场效果 data-transition="fade" data-inline="true">dialog data-transition="po
html页面自动切换效果,html5各种页面切换效果和模态对话框用法总结
weixin_39758229的博客
05-31 885
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下：页面动画：data-transition 属性可以定义页面切换是的动画效果。例如：I'll popdata-transition 参数表：参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转备注：如果想要在目...
分享96个jQuery特效，总有一款适合您
最新发布
weixin_47730343的博客
02-14 881
jQuery页面滚动特效插件OnePageScroll.js。滚动堆叠插件jquery.stacked-strips.js。鼠标全屏滚动插件jquery.mousewheel.js。sonpScroll.js平滑单页滚动jQuery插件。图像无缝滚动插件jquery.imgscroll.js。页面滚动数字增长插件jQuery.Running.js。jquery文字上下滚动插件jqScroll.js。jquery.scrollex.js页面滚动插件。数字动画插件jquery.countup.js。
jquery Mobile入门—多页面切换示例学习
10-27
总的来说，jQuery Mobile的多页面切换功能结合其内置的动画效果和组件，为开发响应式、交互性强的移动应用提供了一个强大且易用的工具集。通过理解并熟练运用这些概念和技术，开发者可以创建出既美观又流畅的移动...
jquery-mobile基础属性与用法详解
10-21
**页面过渡效果**：在链接中添加 `data-transition` 属性可以定义页面间的过渡动画。例如，`data-transition="slide"` 将使页面左右滑动过渡，而 `data-direction="reverse"` 可以设置反向动画。 ```html ...
基于h5的jquery mobile图片切换
04-09
例如，使用`.slide`或`.fade`动画，配合`data-transition`属性，可以实现图片在切换时的滑动或淡入淡出效果。此外，jQuery Mobile的栅格系统和自动流式布局确保了图片在不同屏幕尺寸下都能自适应显示。 为了实现...
jquerymobile设计完整例子
05-11
jQuery Mobile 使用无刷新技术（AJAX）来实现页面间的平滑切换。通过设置`data-rel="next"`或`data-rel="back"`，可以实现向后或向前的页面跳转。同时，`data-transition`属性可以指定过渡动画，如滑动、淡入淡出等...
jquery mobile css3手机表单页面布局按钮样式
11-24
例如，你可以使用 `<a>` 或 `<button>` 标签，加上 `data-role="button"` 属性来创建一个基本的jQuery Mobile按钮。 CSS3 在这里的作用是进一步增强按钮的视觉效果。比如，你可以使用 CSS3 的渐变、阴影、边框半径...
jQuery mobile动画形式的转换
12-16
jQuery mobile动画形式的转换
jquery mobile如何实现滑动屏幕跳转页面
橙子9102
04-26 2651
$("#detail_center").bind("swipeleft", function(e){$.mobile.changePage ('index.html', 'fade', false, false);}); 首先swipeleft api如下： swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发 swipeleft（左划）：划动事件
基于jQuery WeUi非常简单易用的手机端滚动翻页插件（scroll-grid）
mzllyl的专栏
12-02 2147
一、组件概述  基于jQuery WeUi的手机端滚动分页组件，实现上拉加载下一页数据及下拉加载最新数据。对比网上常用手机端分页组件（如，iscroll.js）主要有以下优势：  1.使用非常简单，学习成本很低，1行js代码既可以完成前端代码编写  2.列表点击进入详情后，再返回列表时可以保留进入详情前的数据以及滚动的位置。这一点是最重要的优势，也是当时写这个组件的动机。 二、实现思路 ...
H5-移动端实现滑屏翻页-原生js/jquery
weixin_30879833的博客
05-31 1123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery实现手机版页面翻页效果。
大道泛兮
09-16 1227
var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; var commentTpl = '\ " style="width: 65px; height: 20px;z-index:999;" onclick="comment()">去评价\
当前jQuery Mobile支持的6种页面切换方式
10-09 1120
切换方式 data-transition属性值 横向幻灯方式 slide 自上向下幻灯方式 slideup 自下向上幻灯方式 slidedown 中央弹出 pop 淡入淡出 fade 旋转弹出 flip
JavaScript——滑动翻页功能（缓慢移动+无缝衔接）
我是我
07-28 3098
1. 需求+效果 展示 最近做开发时有这样一个需求，滚动播放列表，数据有限，当这些数据滚动播放结束后再重头开始，做完之后的效果是这样的 2. 实现代码(带标注) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
jquery mobile左右滑动切换页面
12-05 340
jquery mobile左右滑动切换页面 jquery mobile左右滑动切换页面$(function() {$("body").bind('swiperight', function() { $.mobile.changePage("#foo", {tran...
使用jQuery实现点击左右滑动切换特效
weixin_30475039的博客
07-22 876
使用jQuery实现点击左右滑动切换特效： HTML代码如下： 1 <!--整体背景div--> 2 <div class="warp"> 3 <!--中间内容div--> 4 <div class="divContent"> 5 <div class="content"> ...
uni-transition过渡动画渲染下拉框uni-data-select
09-01
你可以使用`uni-transition`库来实现下拉框`uni-data-select`的过渡动画渲染。首先，确保已经安装了`uni-transition`库。 然后，在`uni-data-select`组件上应用过渡效果，可以使用以下步骤进行操作： 1. 在你的页面或组件中引入`uni-transition`库： ```javascript import { Transition } from 'uni-transition'; ``` 2. 在模板中使用`Transition`组件包裹`uni-data-select`组件，并设置过渡动画效果： ```html <template> <transition name="fade"> <uni-data-select></uni-data-select> </transition> </template> ``` 3. 在样式中定义过渡动画效果： ```css .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } ``` 以上代码中，通过给`Transition`组件添加`name="fade"`属性，指定了过渡动画的名称为"fade"。然后在样式中定义了"fade-enter-active"、"fade-leave-active"、"fade-enter"和"fade-leave-to"这些类名，通过设置过渡效果的属性（例如`opacity`）和持续时间（例如`0.5s`）来实现淡入淡出效果。 现在，当你使用`uni-data-select`组件时，它将会带有过渡动画效果。你可以根据需要调整过渡效果的样式和持续时间，来实现你想要的下拉框过渡动画渲染效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值