|
|
基本用法
使用Fx.Elements的方法看起來(lái)和Fx.Morph差不多。這兩者之間的區(qū)別在于.start({})方法和.set({})方法。
為了保證事情簡(jiǎn)潔，讓我們首先建立一個(gè)元素?cái)?shù)組，以用來(lái)傳遞給Fx.Elements。
參考代碼： [復(fù)制代碼] [保存代碼]
var fxElementsArray = $$('.myElementClass');
現(xiàn)在我們就可以把我們的數(shù)組傳遞給Fx.Elements對(duì)象了。
參考代碼：
復(fù)制代碼 代碼如下:
var fxElementsObject = new Fx.Elements(fxElementsArray, {
// Fx選項(xiàng)
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
// Fx事件
onStart: function(){
startInd.highlight('#C3E608');
}
});
和Fx.Morph一樣，F(xiàn)x.Elements擴(kuò)展了Fx類，可以允許你使用Fx的全部選項(xiàng)和事件。
.start({})和.set({})方法
要開(kāi)始一個(gè)Fx.Elements效果，或者使用Fx.Elements設(shè)置樣式，你可以像使用Fx.Tween和Fx.Morph那樣做，不過(guò)不是直接把設(shè)置直接應(yīng)用到Fx.Elements對(duì)象上，而是通過(guò)索引引用對(duì)應(yīng)的元素――第一個(gè)元素是0，第二個(gè)是1，以此類推。
參考代碼：復(fù)制代碼 代碼如下:
// 你可以用.set({...})來(lái)設(shè)置樣式
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
// 或者用.start({...})創(chuàng)建漸變動(dòng)畫
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
就像Fx.Morph，你可以為元素的漸變動(dòng)畫設(shè)定任何一個(gè)開(kāi)始值和結(jié)束值，你也可以只設(shè)置一個(gè)參數(shù)（就像我們上面只給寬度設(shè)置了一個(gè)值），那么這個(gè)元素將會(huì)從當(dāng)前值變化到新參數(shù)指定的值。
這就是關(guān)于Fx.Elements的全部?jī)?nèi)容了?？梢钥纯聪旅娴睦?，看看它們是怎么使用的。
示例代碼
這里我們對(duì)兩個(gè)元素使用了Fx.Elements。在漸變動(dòng)畫中有幾個(gè)不同的類型可以選擇，同時(shí)暫停按鈕可以讓你暫停動(dòng)畫。
首先，我們來(lái)創(chuàng)建我們的元素，我們的可能告知按鈕（包括重置（reset）按鈕、暫停（pause）按鈕和恢復(fù)（resume）按鈕），還有一些指示器，以便讓我們看明白這個(gè)過(guò)程。
參考代碼：
復(fù)制代碼 代碼如下:
<div id="start_ind" class="ind">onStart</div>
<div id="cancel_ind" class="ind">onCancel</div>
<div id="complete_ind" class="ind">onComplete</div>
<div id="chain_complete_ind" class="ind">onChainComplete</div>
<span id='buttons'>
<button id="fxstart">Start A</button>
<button id="fxstartB">Start B</button>
<button id="fxset">Reset</button>
<button id="fxpause">Pause</button>
<button id="fxresume">Resume</button>
</span>
<div class="myElementClass">Element 0</div>
<div class="myElementClass">Element 1</div>
我們的CSS代碼也很簡(jiǎn)單
參考代碼：
復(fù)制代碼 代碼如下:
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
下面是MooTools代碼。
參考代碼： 復(fù)制代碼 代碼如下:
var startFXElement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 500,
'background-color': '#333'
},
'1': {
'width': 500,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $('start_ind');
var cancelInd = $('cancel_ind');
var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
},
onCancel: function(){
cancelInd.highlight('#C3E608');
},
onComplete: function(){
completeInd.highlight('#C3E608');
},
onChainComplete: function(){
chainCompleteInd.highlight('#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){
fxElementsObject.pause();
});
$('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
更多學(xué)習(xí)
正如你所看到的，F(xiàn)x.Elements非常簡(jiǎn)單。要更深入地學(xué)習(xí)，可以仔細(xì)地閱讀一下Fx.Elements文檔、Fx.Morph文檔和Fx文檔。
另外，確保閱讀過(guò)我們關(guān)于Fx.Morph和Fx選項(xiàng)及事件的教程。
下載最后一個(gè)示例的代碼
也包含你開(kāi)始實(shí)踐所需要的所有東西。
JavaScript技術(shù)：Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動(dòng)畫，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
