五、Ext.Fx类
正如前面所说,Extjs的动画大部分定义在Ext.Fx中,尽管如此,Ext.Element类也定义了部分动画函数。我们先来看看Ext.Fx类中的重要方法。
1、slideIn ( [String anchor], [Object options] ):
功能:滑入效果,作动画显示。
参数:
anchor:推出的方向,定义了8种不同的方向,值不区别大小写,可选。
值
说明
tl
左上角
t
顶部中央
tr
右上角
l
左边中央
r
右边中央
bl
左下角
b
底部中央
br
右下角
options:选项配置,比较典型的是duration属性,用于定义动画持续的时间,可选。以下是默认配置:
slideIn('t', {
easing: 'easeOut',
duration: .5
});
示例:在10秒钟之内将div从右边中央滑入
5_5_1.html
<div id="a1"> slideIn </div>
5_5_1.js
Ext.onReady(function(){
Ext.get("a1").applyStyles({position: "absolute", top: 200, left: 200, backgroundColor: "red", width: 100, height: 100}).slideIn("r", {duration: 10});
})
applyStyles是Ext.Element的方法,用于定义指定元素的样式。
2、slideOut ( [String anchor], [Object options] ):滑出效果,作动画隐藏。参数及用法同上。以下是该方法的默认配置:
slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
}
);
3、highlight ( [String color], [Object options] ):根据设置的颜色高亮显示 Element 对象,然后渐隐为原始颜色。默认情况,高亮显示的背景颜色为黄色。
参数:
color:起始颜色
options:选项配置
一个能应用在项目中的典型例子是:
Ext.get("a2").applyStyles({
position: "absolute",
top: 200,
left: 300,
backgroundColor: "red",
width: 100,
height: 100}).highlight("0000ff"/*起始颜色*/,
{
attr: 'background-color', /*我们改变的是背景颜色*/
duration: 2,/*动画持续时间*/
endColor: "ff0000" /*结束颜色*/
}
);
如果可以把attr属性值改成color,我们发现颜色改变的不再是背景,而是文字颜色。endColor的颜色值不能是形如red之类的英文单词,只能是16进制表示。起始颜色为蓝色,终止颜色为红色,中间的渐变由Extjs自动完成,非常自然。
4、frame ( [String color], [Number count], [Object options] ):展示一个展开的波纹,伴随着渐隐的边框以突出显示 Element 对象。默认情况下展示的是一个淡蓝色的波纹。
参数:
color:波纹颜色
count:波纹的个数
options:选项配置
示例:三个红色的波纹并持续3秒。
Ext.get("a3").applyStyles({
position: "absolute",
top: 200,
left: 400,
backgroundColor: "red",
width: 100,
height: 100}).frame("ff0000", 3, { duration: 3 });
5、fadeIn ( [Object options] ):将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。
示例:
Ext.get("a4").applyStyles({
position: "absolute",
top: 200,
left: 500,
backgroundColor: "red",
width: 100,
height: 100}).fadeIn({
endOpacity: 1, //可以是 0 到 1 之前的任意值(例如:.5)
duration: 4
});
分享到:
相关推荐
-搜索引擎优化:单页面需要单独方案,实现较为困难,不利于SEO搜索,可利用与SSR优化,多页面实现方法容易 -适用范围:单页面高要求的体验度,追求页面的流畅,多页面追求高度支持搜索引擎的应用 -开发成本:单...
EasyJWeb是基于Java技术,应用于WEB应用程序快速开发的MVC框架,框架设计构思来源于国内众多项目实践,框架充分借签了... 3、页面程序完全分离:实现显示页面与程序逻辑的完全分离,克服了传统Jsp页面难于维护的问题
毕业设计,基于SpringBoot+Vue+MySql开发的前后端分离的知识管理系统,含完整源码,数据库脚本,毕业论文,视频教程 随着国内市场经济这几十年来的蓬勃发展,突然遇到了从国外传入国内的互联网技术,互联网产业从...
毕业设计,基于SpringBoot+Vue+MySql开发的前后端分离的江理工文档管理系统,内含完整源代码,数据库脚本,毕业论文,开题报告,视频教程 随着国内市场经济这几十年来的蓬勃发展,突然遇到了从国外传入国内的互联网...
2、完全静态化,所有页面均生成静态页面,保证访问速度。 3、shtml区块镶嵌,保持页面始终在更新,不同于之前的页面。 4、完全自动更新,内嵌更新脚本,不用负责,自动添加新页面 5、集成百度opensug,搜索自动...
PTCMS游戏下载小偷特色功能: 1、404伪静态模式,无需组件支持,只要可以自定义404页面就可以伪静态 2、完全静态化,所有页面均生成静态页面,保证访问速度。 3、shtml区块镶嵌,保持页面始终在更新,不同于之前的...
毕业设计,基于SpringBoot+Vue+MySql开发的前后端分离的高校专业实习管理系统,含完整源代码,数据库脚本,视频教程 随着国内市场经济这几十年来的蓬勃发展,突然遇到了从国外传入国内的互联网技术,互联网产业从...
第01章:序 第02章:准备与资源 第03章:Ext OOP基础 第04章:消息框 第05章:页面与脚本完全分离 第06章:元素操作与模板 第07章:格式化 第08章:Extjs组件结构 第09章:按钮与日期选择器 第10章:数据与ComboBox ...
第01章:序 第02章:准备与资源 第03章:Ext OOP基础 第04章:消息框 第05章:页面与脚本完全分离 第06章:元素操作与模板 第07章:格式化 第08章:Extjs组件结构 第09章:按钮与日期选择器 第10章:数据与ComboBox ...
JSP是Java Server Pages...与ASP相比,在许多方面有了大大的改进,具有动态页面与静态页面想分离,并摆脱系统平台的束缚。JSP是通过编译后执行的,完全克服了ASP的脚本级解释执行的缺点,目前以成为Web开发的主流选择。
本文详细介绍了JQuery的使用方法,对于初学者来说相当有用,用JQuery来写页面可以实际脚本与html代码的完全分离,大提高页面的可读性,同时,JQuery中提供的一些方法,比起我们自己写的脚本效率通常比较高。
TinyButStrong (TBS) 是一个PHP类,它能让你开发系统时能干净分离PHP脚本和HTML文件. 使用 TBS, HTML 页面是由模板合并数据后动态生成的. 这被称为模板引擎. 这个TBS的名字来源于本工具目前虽然只有8个函数,但却非常...
8.页面结构与表现完全分离 ◦皮肤制作更加容易 ◦维护页面更加方便 ◦页面更加简洁清晰 ◦提高网页打开速度 9.页面结构与行为完全分离 ◦维护更加方便 ◦减少重复代码 ◦页面更加简洁清晰 ◦提高网页打开...
8.页面结构与表现完全分离 ◦皮肤制作更加容易 ◦维护页面更加方便 ◦页面更加简洁清晰 ◦提高网页打开速度 9.页面结构与行为完全分离 ◦维护更加方便 ◦减少重复代码 ◦页面更加简洁清晰 ◦提高网页打开...
XMLHttpRequest对象是实现Ajax应用的核心; JavaScript是Ajax应用在客户端使用的脚本语言;... XSLT可以将XML文档转换为任何形式的文档,在Ajax应用中使用XSLT可以实现数据和页面显示的完全分离;
PTCMS游戏下载小偷空间...4、完全自动更新,内嵌更新脚本,不用负责,自动添加新页面 5、集成百度opensug,搜索自动提示。 6、内容与模板相分离,可以自己制作模板使用方法: 1、下载上传程序,确保根目录有写入权限
Web页面开发人员不会都是熟悉脚本语言的编程人员。JavaServer Page技术封装了许多功能,这些功能是在易用的、与JSP相关的XML标识中进行动态内容生成所需要的。标准的JSP标识能够访问和实例化JavaBeans组件,设置...
Web页面开发人员不会都是熟悉脚本语言的编程人员。JavaServer Page技术封装了许多功能,这些功能是在易用的、与JSP相关的XML标识中进行动态内容生成所需要的。标准的JSP标识能够访问和实例化JavaBeans组件,设置...
tagcloud.swf、swfobject.js:Flash执行文件与后台脚本; src文件夹:google源文件; data.txt:需要显示的网站名以及网址,两者以“☆”号分离开来。 此次山寨制作纯属个人爱好,期待更酷替代品出现 :>
实现了校验代码于html代码的完全分离;你只需写一行配置信息就能完成一个表单元素的所有校验。插件本身提供了很多回调函数,使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。 在同一个页面你可以拥有...