要创建一个自定义的CSS过渡,选择一个类名对应的名字你的过渡,例如“幻灯片”,然后定义 转入和转出,利用转换或动画关键帧的CSS规则:
.slide.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: slideinfromright;
-moz-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-animation-name: slideouttoleft;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideinfromright {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(-100%); }
}
---------------------------------------------------------------
如果你的转换支持相反的方向,你需要创建CSS规则,使用反向
类除了过渡类名称
.slide.in.reverse {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
-moz-animation-name: slideinfromleft;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-moz-animation-name: slideouttoright;
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
to { -moz-transform: translateX(0); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(100%); }
}
----------------------------------------------------------
指定名称的过渡在@数据化属性的导航链接
<a href="#page2" data-transition="slide">Page 2</a>
-----------------------------------------------------------
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225;
}
-----------------------------------------------
jQuery Mobile的CSS定义了默认的宽松和持续时间在以下规则
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225;
}
---------------------------------------
相关推荐
这个文件中,jQuery Mobile将DOM元素转换为可触摸的交互元素,并提供了一系列API和方法,如`.page()`用于初始化页面,`.changePage()`用于页面间的切换。此外,还有一系列用于事件绑定和组件创建的函数。 对于页面...
通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能丰富的移动网页和应用。 二、官方文档与示例 “jquery mobile官方git资源”中包含的官方文档是学习...
jQuery Mobile Datepicker 是一个专为手机端设计的日期选择器插件,它基于流行的 jQuery 和 jQuery Mobile 库,为开发者提供了丰富的功能和自定义选项。本文将深入探讨这个插件的使用方法、核心功能以及如何对其进行...
4. **主题系统**:jQuery Mobile 提供了一套 CSS 主题引擎,可以通过简单的 CSS 类或自定义 CSS 文件轻松改变应用的整体外观。 5. **自动初始化**:jQuery Mobile 会自动检测页面中的元素,并根据它们的数据属性...
jQuery Mobile 是基于 jQuery 和 jQuery UI 的轻量级框架,主要目标是简化移动 Web 开发,提供一致的触摸事件处理、页面结构和导航模式。其核心理念是“Write Less, Do More”,通过简单的 HTML 标签和 CSS 类,实现...
《jQuery Mobile自定义主题——构建出色App UI设计》 在移动应用开发领域,优秀的用户界面(UI)设计是提升用户体验的关键。jQuery Mobile是一款强大的前端框架,专为移动设备设计,提供了一套完整的交互组件和优雅...
在"jqueryMobile插件集"中,可能包含以下几类插件: 1. **组件增强插件**:这些插件增强了jQuery Mobile内置组件的功能,如更复杂的下拉菜单、自定义表单验证或者动画效果丰富的滑块。 2. **交互插件**:这类插件...
在下载的 "JqueryMobile-1.4.2 Demo" 压缩包中,你可以找到各种示例页面和组件的实践应用,通过查看和分析这些例子,可以更直观地了解 jQuery Mobile 的功能和使用方法。结合实际项目需求,灵活运用这些知识,可以...
jQuery Mobile是基于jQuery库的触摸优化框架,专为移动设备设计,提供了一套跨平台、一致的用户界面组件。它简化了移动Web应用的开发,通过HTML5和CSS3实现丰富的交互效果和动画。 **2. jQuery Mobile提示框组件** ...
它基于 jQuery 库,简化了在移动设备上创建响应式、触摸友好的网页的流程。本项目是针对初学者的一个实践教程,旨在帮助开发者快速掌握 jQuery Mobile 的基本用法。 ### 一、jQuery Mobile 概述 1. **基础结构**:...
在这个“jQueryMobile源代码”中,我们可以深入研究其内部机制,了解它是如何实现这些功能的。 首先,jQuery Mobile的核心概念是“页面(Pages)”和“面板(Panels)”。页面是应用的基本单元,而面板则用于提供...
3. **主题和主题系统**:jQuery Mobile使用主题系统来控制UI的颜色和风格,可以通过CSS类或数据属性自定义。 四、jQuery Mobile与jQuery的关系 jQuery Mobile建立在jQuery之上,它扩展了jQuery的功能,专门针对...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介 1.1 通用访问 ...
书中提到了“Create Your First jQuery Mobile Application”(创建你的第一个jQuery Mobile应用程序),这表明书中应该有一部分是关于如何开始使用jQuery Mobile的教程,包括创建项目、设置环境以及编写基础的移动...
- `<head>`:包含 jQuery Mobile 的 CSS 和 JavaScript 文件引用,以及自定义主题的 CSS。 - `<body>`:至少包含一个数据角色为 "page" 的容器,如 `<div data-role="page">`。 - `page` 内部可以有数据角色为 ...
这将自动应用jQuery Mobile的样式,并转换为一个完整的工具栏。 2. **添加内容** 菜单栏可以包含`<a>`标签来创建可点击的按钮或链接,或者使用`<h1>`, `<h2>`, 等标题标签来显示页面标题。例如: ```html ...
- **主题系统**:jQuery Mobile 使用 CSS 类来应用主题,如 `ui-body-*` 和 `ui-bar-*` 分别代表背景和工具条的主题。 - **自定义主题**:通过在线主题生成器(ThemeRoller)可以定制自己的主题色。 7. **组件和...
jQuery Mobile 是一个强大的、基于 jQuery 库的框架,专为移动设备设计,提供了一套完整的用户界面 (UI) 模板和交互功能,使得开发者能够快速创建响应式和触控友好的网页应用。本教程主要面向初学者,旨在帮助你掌握...
6. **主题和样式**:jQuery Mobile使用一套基于CSS的可配置主题系统,通过修改主题CSS文件或使用"data-theme"属性,可以轻松改变页面的颜色和风格。 7. **事件处理**:理解jQuery Mobile中的事件是至关重要的,例如...