搜索:
首页 >> JavaScript >> Js高级编程 >> Mootools 1.2教程(22)——同时进行多个形变动画

Mootools 1.2教程(22)——同时进行多个形变动画

2008-12-29 作者:Fdream 来源:Fdream 投递文章

  原文地址:30 Days of Mootools 1.2 Tutorials - Day 22 - Fx.Elements

通过Fx.Elements同时处理多个形变动画

阅读上一讲:Mootools 1.2教程(21)——类(二)

今天我们来学习一下Fx.Elements插件,这是一个基于Fx.Morph的插件。与应用于单个元素不同的是,Fx.Elements可以允许你一次性给多个元素添加动画。这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。

基本用法

使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。

为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。

参考代码: 


现在我们就可以把我们的数组传递给Fx.Elements对象了。

参考代码: 

var fxElementsObject = new Fx.Elements(fxElementsArray, { 
    // Fx选项 
    link: 'chain', 
    duration: 1000, 
    transition: 'sine:in:out', 

    // Fx事件 
    onStart: function(){ 
        startInd.highlight('#C3E608'); 
    } 


和Fx.Morph一样,Fx.Elements扩展了Fx类,可以允许你使用Fx的全部选项和事件

.start({})和.set({})方法

要开始一个Fx.Elements效果,或者使用Fx.Elements设置样式,你可以像使用Fx.Tween和Fx.Morph那样做,不过不是直接把设置直接应用到Fx.Elements对象上,而是通过索引引用对应的元素——第一个元素是0,第二个是1,以此类推。

参考代码:  

// 你可以用.set({...})来设置样式 
fxElementsObject .set({ 
    '0': { 
        'height': 10, 
        'width': 10, 
        'background-color': '#333' 
    }, 
    '1': { 
        'width': 10, 
        'border': '1px dashed #333' 
    } 
}); 

// 或者用.start({...})创建渐变动画 
fxElementsObject .start({ 
    '0': { 
        'height': [50, 200], 
        'width': 50, 
        'background-color': '#87AEE1' 
    }, 
    '1': { 
        'width': [100, 200], 
        'border': '5px dashed #333' 
    }


就像Fx.Morph,你可以为元素的渐变动画设定任何一个开始值和结束值,你也可以只设置一个参数(就像我们上面只给宽度设置了一个值),那么这个元素将会从当前值变化到新参数指定的值。

这就是关于Fx.Elements的全部内容了。可以看看下面的例子,看看它们是怎么使用的。

1   2 下一页 尾 页
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号