mootools(十二) - 多彩的开始2
时间：2007-08-18 来源：linxh
本文转自： http://blog.csdn.net/zarknight/archive/2007/04/30/1592469.aspx
mootools的Fx.Base类是mootools效果库Fx的基础，而我们平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。
Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：
方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。
var myFx = $('myDiv').effect('width', ...{duration: 1000});
myFx.hide();
方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。
var marginChange = new Fx.Style('myElement', 'margin-top', ...{duration:500});
marginChange.start(10); //从myElement当前的margin-top值过渡到10
marginChange.start(1,20); //myElement的margin-top值从1过渡到20
由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：
var myEffect = $('myElement').effect('height', ...{duration: 1000, transition: Fx.Transitions.linear});
myEffect.start(10, 100);
想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：
var myFx = new Fx.Styles('myDiv', ...{duration: 1000});
myFx.start(...{
'width':[100,300],
'height':[100,200]
});
十分简单明了。
同样，Effect由此多了一个effects快捷方法，可以这样使用：
var myFxs= $(myElement).effects(...{duration: 1000, transition: Fx.Transitions.sineInOut});
myFxs.start(...{
'height': [10, 100],
'width': [900, 300]
});
另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start(...{
'0': ...{ //对第一个元素执行opacity和width的过渡变化
'opacity': [0,1],
width': [100,200]
},
'1': ...{ //对第二个元素执行opacity过渡变换
'opacity': [0.2, 0.5]
}
});
Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：
方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。
var myFx = $('myDiv').effect('width', ...{duration: 1000});myFx.hide();
方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。
var marginChange = new Fx.Style('myElement', 'margin-top', ...{duration:500});marginChange.start(10); //从myElement当前的margin-top值过渡到10marginChange.start(1,20); //myElement的margin-top值从1过渡到20
由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：
var myEffect = $('myElement').effect('height', ...{duration: 1000, transition: Fx.Transitions.linear});myEffect.start(10, 100);
想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：
var myFx = new Fx.Styles('myDiv', ...{duration: 1000});myFx.start(...{ 'width':[100,300], 'height':[100,200]});
十分简单明了。
同样，Effect由此多了一个effects快捷方法，可以这样使用：
var myFxs= $(myElement).effects(...{duration: 1000, transition: Fx.Transitions.sineInOut});myFxs.start(...{ 'height': [10, 100], 'width': [900, 300]});
另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：
var myElementsEffects = new Fx.Elements($$('a'));myElementsEffects.start(...{ '0': ...{ //对第一个元素执行opacity和width的过渡变化 'opacity': [0,1], width': [100,200] }, '1': ...{ //对第二个元素执行opacity过渡变换 'opacity': [0.2, 0.5] }});
相关阅读 更多 +
