`
wmhcymx
  • 浏览: 21212 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery mobile 创建自定义的基于CSS的转换

阅读更多

 

要创建一个自定义的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实战源码

    这个文件中,jQuery Mobile将DOM元素转换为可触摸的交互元素,并提供了一系列API和方法,如`.page()`用于初始化页面,`.changePage()`用于页面间的切换。此外,还有一系列用于事件绑定和组件创建的函数。 对于页面...

    jquery mobile官方git资源

    通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能丰富的移动网页和应用。 二、官方文档与示例 “jquery mobile官方git资源”中包含的官方文档是学习...

    jquery mobile datepicker 手机端日期选择器

    jQuery Mobile Datepicker 是一个专为手机端设计的日期选择器插件,它基于流行的 jQuery 和 jQuery Mobile 库,为开发者提供了丰富的功能和自定义选项。本文将深入探讨这个插件的使用方法、核心功能以及如何对其进行...

    jQuery mobile库包及例子

    4. **主题系统**:jQuery Mobile 提供了一套 CSS 主题引擎,可以通过简单的 CSS 类或自定义 CSS 文件轻松改变应用的整体外观。 5. **自动初始化**:jQuery Mobile 会自动检测页面中的元素,并根据它们的数据属性...

    JqueryMobile课件源码

    jQuery Mobile 是基于 jQuery 和 jQuery UI 的轻量级框架,主要目标是简化移动 Web 开发,提供一致的触摸事件处理、页面结构和导航模式。其核心理念是“Write Less, Do More”,通过简单的 HTML 标签和 CSS 类,实现...

    jquery-mobile-theme

    《jQuery Mobile自定义主题——构建出色App UI设计》 在移动应用开发领域,优秀的用户界面(UI)设计是提升用户体验的关键。jQuery Mobile是一款强大的前端框架,专为移动设备设计,提供了一套完整的交互组件和优雅...

    jqueryMobile插件集

    在"jqueryMobile插件集"中,可能包含以下几类插件: 1. **组件增强插件**:这些插件增强了jQuery Mobile内置组件的功能,如更复杂的下拉菜单、自定义表单验证或者动画效果丰富的滑块。 2. **交互插件**:这类插件...

    JqueryMobile1.4.2最新版Demo

    在下载的 "JqueryMobile-1.4.2 Demo" 压缩包中,你可以找到各种示例页面和组件的实践应用,通过查看和分析这些例子,可以更直观地了解 jQuery Mobile 的功能和使用方法。结合实际项目需求,灵活运用这些知识,可以...

    JQUERYMOBILE 提示框

    jQuery Mobile是基于jQuery库的触摸优化框架,专为移动设备设计,提供了一套跨平台、一致的用户界面组件。它简化了移动Web应用的开发,通过HTML5和CSS3实现丰富的交互效果和动画。 **2. jQuery Mobile提示框组件** ...

    jqueryMobile入门练习项目

    它基于 jQuery 库,简化了在移动设备上创建响应式、触摸友好的网页的流程。本项目是针对初学者的一个实践教程,旨在帮助开发者快速掌握 jQuery Mobile 的基本用法。 ### 一、jQuery Mobile 概述 1. **基础结构**:...

    jQueryMobile源代码

    在这个“jQueryMobile源代码”中,我们可以深入研究其内部机制,了解它是如何实现这些功能的。 首先,jQuery Mobile的核心概念是“页面(Pages)”和“面板(Panels)”。页面是应用的基本单元,而面板则用于提供...

    jquery.mobile-1.3.2

    3. **主题和主题系统**:jQuery Mobile使用主题系统来控制UI的颜色和风格,可以通过CSS类或数据属性自定义。 四、jQuery Mobile与jQuery的关系 jQuery Mobile建立在jQuery之上,它扩展了jQuery的功能,专门针对...

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介  1.1 通用访问 ...

    [jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

    书中提到了“Create Your First jQuery Mobile Application”(创建你的第一个jQuery Mobile应用程序),这表明书中应该有一部分是关于如何开始使用jQuery Mobile的教程,包括创建项目、设置环境以及编写基础的移动...

    jquery mobile 实例

    - `&lt;head&gt;`:包含 jQuery Mobile 的 CSS 和 JavaScript 文件引用,以及自定义主题的 CSS。 - `&lt;body&gt;`:至少包含一个数据角色为 "page" 的容器,如 `&lt;div data-role="page"&gt;`。 - `page` 内部可以有数据角色为 ...

    jQuery mobile美化的菜单栏控件

    这将自动应用jQuery Mobile的样式,并转换为一个完整的工具栏。 2. **添加内容** 菜单栏可以包含`&lt;a&gt;`标签来创建可点击的按钮或链接,或者使用`&lt;h1&gt;`, `&lt;h2&gt;`, 等标题标签来显示页面标题。例如: ```html ...

    jqueryMobile 教程+手册+实例

    - **主题系统**:jQuery Mobile 使用 CSS 类来应用主题,如 `ui-body-*` 和 `ui-bar-*` 分别代表背景和工具条的主题。 - **自定义主题**:通过在线主题生成器(ThemeRoller)可以定制自己的主题色。 7. **组件和...

    JqueryMobile基础,初学者

    jQuery Mobile 是一个强大的、基于 jQuery 库的框架,专为移动设备设计,提供了一套完整的用户界面 (UI) 模板和交互功能,使得开发者能够快速创建响应式和触控友好的网页应用。本教程主要面向初学者,旨在帮助你掌握...

    jQuery Mobile快速入门源码 .zip

    6. **主题和样式**:jQuery Mobile使用一套基于CSS的可配置主题系统,通过修改主题CSS文件或使用"data-theme"属性,可以轻松改变页面的颜色和风格。 7. **事件处理**:理解jQuery Mobile中的事件是至关重要的,例如...

Global site tag (gtag.js) - Google Analytics