您的位置：首页 > 其它

EXT核心API详解(六)-Ext.Fx

2012-02-07 09:54 218 查看

EXT核心API详解(六)-Ext.Fx

Ext.Fx类

对于我这样的懒鬼而言，Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类

定义了一些常用的特效方法,不妨自己多动手试试下面的方法，很有趣的

fadeIn( [Object options] ) : Ext.Element

渐显 options参数有以下属性

callback:Function 完成后的回叫方法

scope:Object 目标

easing:String 行为方法默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

easeBoth:开始慢且减速

easeInStrong:开始慢且加速,t的四次方

easeOutStrong:开始快且减速,t的四次方

easeBothStrong:开始慢且减速,t的四次方

elasticIn:

elasticOut:

elasticBoth:

backIn:

backOut:

backBoth:

bounceIn:

bounceOut:

bounceBoth:

太多,慢慢体会吧

afterCls:String 事件完成后元素的样式

duration:Number 事件完成时间（以秒为单位）

remove:Boolean 事件完成后元素销毁?

useDisplay:Boolean 隐藏元素是否使用display或visibility属性?

afterStyle:String/Object/Function 事件完成后应用样式

block:Boolean 块状化?

concurrent:Boolean 顺序还是同时执行？

stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element

渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度

例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element

边框变亮扩展然后渐隐

例:el.frame("ff0000", 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element

渐渐滑出视图,anchor定义

tl 左上角(默认)

t 上居中

tr 右上角

l 左边界的中央

c 居中

r 右边界的中央

bl 左下角

b 下居中

br 右下角

例:

el.ghost('b', {

easing: 'easeOut',

duration: .5

remove: false,

useDisplay: false

});

hasActiveFx() : Boolean

指示元素是否当前有特效正在活动

hasFxBlock() : Boolean

是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element

高亮显示当前元素

例:el.highlight("ffff9c", {

attr: "background-color", //can be any valid CSS property (attribute) that supports a color value

endColor: (current color) or "ffffff",

easing: 'easeIn',

duration: 1

});

pause( Number seconds ) : Ext.Element

暂停

puff( [Object options] ) : Ext.Element

吹，吹，吹个大气球，元素渐大并隐没

例:el.puff({

easing: 'easeOut',

duration: .5,

remove: false,

useDisplay: false

});

scale( Number width, Number height, [Object options] ) : Ext.Element

缩放

例:el.scale(

[element's width],

[element's height], {

easing: 'easeOut',

duration: .35

});

sequenceFx()

排队特效

shift( Object options ) : Ext.Element

位移,并可重置大小,透明度等

例:

el.shift({

width: [element's width],

height: [element's height],

x: [element's x position],

y: [element's y position],

opacity: [element's opacity],

easing: 'easeOut',

duration: .35

});

slideIn( [String anchor], [Object options] ) : Ext.Element

slideOut( [String anchor], [Object options] ) : Ext.Element

滑入/滑出

例:el.slideIn('t', {

easing: 'easeOut',

duration: .5

});

stopFx() : Ext.Element

停止特效

switchOff( [Object options] ) : Ext.Element

收起并隐没

例:

el.switchOff({

easing: 'easeIn',

duration: .3,

remove: false,

useDisplay: false

});

syncFx() : Ext.Element

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航