Mootools 1.2教程 Fx.Tween的使用
更新時(shí)間：2009年09月15日 19:12:30 作者：
今天我們開(kāi)始第三講，我們今天主要看一下Fx.Tween。
和我們看到的其他的MooTools函數(shù)一樣，這些方法使用起來(lái)都非常簡(jiǎn)單，但是功能都很強(qiáng)大。Tween可以讓你添加那些極“炫”的效果——可以很平滑地發(fā)生形變動(dòng)畫(huà)，從而改善你的用戶體驗(yàn)。
Tween的快捷方法
我們通常都從“基本知識(shí)”入手，不過(guò)MooTools 1.2只為漸變（tween）提供了這樣極其出色的快捷方法，它們使用起來(lái)都極其簡(jiǎn)單以至于我忍不住要從這里開(kāi)始。
.tween();
一個(gè)漸變（tween）是一個(gè)在兩個(gè)樣式屬性值之間的平滑的變化。舉個(gè)例子，通過(guò)漸變（tween）你可以把div的寬度（width）平滑地由100像素變化為300像素。
參考代碼：
// 創(chuàng)建一個(gè)新的函數(shù)
var tweenerFunction = function() {
// 選中你要使用漸變的元素
// 然后加上.tween
// 最后聲明你要變化到的屬性和值
$('tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
// 在這里給一個(gè)按鈕添加一個(gè)事件
// 當(dāng)點(diǎn)擊時(shí)初始化這個(gè)漸變
// 并調(diào)用我們的漸變函數(shù)
$('tween_button').addEvent('click', tweenerFunction);
});
相應(yīng)于上面的代碼，我們的HTML代碼看起來(lái)大概應(yīng)該是這樣的：
參考代碼：
<div id="tweener"></div>
<button id="tween_button">300 width</button>
.fade();
這個(gè)方法可以讓你平滑地調(diào)整一個(gè)元素的不透明度（opacity）。這個(gè)使用起來(lái)和上面的例子幾乎一模一樣：
參考代碼：
// 創(chuàng)建一個(gè)新函數(shù)
var tweenFadeFifty = function() {
// 在這里創(chuàng)建你的選擇器
// 然后添加.fade
// 最后聲明一個(gè)0到1之間的值（0代表不可見(jiàn)，1代表完全可見(jiàn)）
$('tweener').fade('.5');
}
window.addEvent('domready', function() {
// 在這里給按鈕添加一個(gè)事件
// 點(diǎn)擊時(shí)初始化這個(gè)漸變
// 并調(diào)用我們的漸變函數(shù)
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
參考代碼：
<div id="tweener">
<button id="tween_fade_fifty">Fade to fifty percept opacity</button>
.highlight();
醒目（highlight）是一個(gè)目標(biāo)非常明確（也極其有用）的漸變快捷方法，它提供了兩個(gè)功能：
使用它來(lái)平滑變化到一種不同的背景色
直接設(shè)置一個(gè)不同的背景色，然后平滑變化到另外一個(gè)背景色
這些在創(chuàng)建用戶反饋時(shí)非常有用。例如，你可以在一個(gè)東西被選中時(shí)讓某個(gè)元素閃一下，或者你改變一下顏色，然后當(dāng)它保存或者關(guān)閉時(shí)再閃一下。這有非常多的選擇，而且非常簡(jiǎn)單易用。在這個(gè)例子中，讓我們創(chuàng)建兩個(gè)div，然后分別添加兩種類型的醒目（highlight）方法：
參考代碼：
// 創(chuàng)建一個(gè)函數(shù)
var tweenHighlight = function(event) {
// 這里我們使用了event.target，這是從這個(gè)函數(shù)中傳過(guò)來(lái)的參數(shù)
// 這個(gè)意思是指“觸發(fā)事件的目標(biāo)（來(lái)源）”
// 由于這個(gè)效果應(yīng)用到觸發(fā)事件的元素上面
// 因此我們不需要再創(chuàng)建選擇器
// 注意：addEvent將會(huì)自動(dòng)把event對(duì)象作為參數(shù)傳入這個(gè)調(diào)用函數(shù)
// ... 非常方便
event.target.highlight('#eaea16');
}
// 創(chuàng)建一個(gè)函數(shù)
// 你需要傳入一個(gè)參數(shù)
// 由于這個(gè)函數(shù)是在一個(gè)事件（event）里面被調(diào)用的
// 這個(gè)函數(shù)將會(huì)自動(dòng)傳入event對(duì)象
// 然后你就可以通過(guò).target來(lái)引用這個(gè)元素
// （event的目標(biāo)元素）
var tweenHighlightChange = function(item) {
// 這里我們不是使用一個(gè)顏色，而是添加了一個(gè)逗號(hào)來(lái)分隔第二個(gè)
// 這將設(shè)置第一個(gè)顏色，然后變化到第二個(gè)顏色
item.target.highlight('#eaea16', '#333333');
}
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
參考代碼：
<div id="tweener"></div>
<div id="tweenerChange"></div>
快捷方法示例
這里是一些效果的快捷方法的在線的示例。你可以按不同順序點(diǎn)擊這些按鈕，然后注意一下它們的變化：
參考代碼：
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
// .fade 也可以接受'out'和'in'作為參數(shù)，相當(dāng)于0和1
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
event.target.highlight('#eaea16');
}
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
參考代碼：
<div id="tweener"></div><br />
<button id="tween_button">300 width</button>
<button id="tween_reset">100 width</button>
<button id="tween_fade_out">Fade Out</button>
<button id="tween_fade_fifty">Fade to 50% opacity</button>
<button id="tween_fade_in">Fade In</button>
參考代碼：
#tweener {
height: 100px
width: 100px
background-color: #3399CC
}
把鼠標(biāo)移上去可以看到第一種類型的醒目效果。
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
更多漸變（Tween）
創(chuàng)建一個(gè)新的漸變
如果你想更靈活多變和更多地控制你的變化效果，你可能想創(chuàng)建一個(gè)新的形變動(dòng)畫(huà)來(lái)替代那些快捷方式。注意使用“new”來(lái)創(chuàng)建一個(gè)新的Fx.Tween的實(shí)例：
參考代碼：
window.addEvent('domready', function() {
// 首先我們把要變化的元素賦值給一個(gè)變量
var newTweenElement = $('newTween');
// 現(xiàn)在我們創(chuàng)建一個(gè)動(dòng)畫(huà)事件，然后把這個(gè)元素作為參數(shù)傳入
var newTween = new Fx.Tween(newTweenElement);
});
參考代碼：
<!-- 這個(gè)是我們要應(yīng)用漸變效果的元素 -->
<div id="newTween"></div>
<!-- 這個(gè)是啟動(dòng)漸變效果的按鈕 -->
<button id="netTween_set">Set</div>
通過(guò)漸變?cè)O(shè)置樣式
一旦你從一個(gè)元素創(chuàng)建了一個(gè)新的漸變，你可以輕松地通過(guò).set()方法設(shè)置一個(gè)樣式屬性。這個(gè)和.setStyle()方法一樣。
參考代碼：
var newTweenSet = function() {
// 注意"this"的使用
// 學(xué)習(xí)如何使用"this"
this.set('width', '300px');
}
就像我們以前學(xué)習(xí)的，我們想要把我們的函數(shù)從domready事件中獨(dú)立出來(lái)，但是在這個(gè)例子中，我們想要在domready事件中創(chuàng)建一個(gè)漸變，然后在外部引用它。我們已經(jīng)掌握了一種在domready之外傳遞參數(shù)的方法（通過(guò)創(chuàng)建一個(gè)匿名函數(shù)并傳遞一個(gè)參數(shù)），今天我們要學(xué)習(xí)一種Moo化的更好的方式來(lái)傳遞漸變對(duì)象（這并不是說(shuō)匿名函數(shù)在任何時(shí)候都不再合適）。
.bind();
通過(guò).bind();，我們可以讓一個(gè)函數(shù)里面的“this”等同于參數(shù)：
參考代碼：
// 首先我們給上面我們看到的那個(gè)按鈕添加一個(gè)點(diǎn)擊事件
// 然后，不只是僅僅調(diào)用這個(gè)函數(shù)
// 我們調(diào)用這個(gè)函數(shù)并且添加".bind()"
// 然后我們替換掉任何我們要傳遞給函數(shù)的
// 現(xiàn)在，在這個(gè)"newTweenSet"函數(shù)內(nèi)部，"this"將指向"newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
因此，現(xiàn)在我們?cè)倏纯瓷厦娴倪@個(gè)函數(shù)，“this”現(xiàn)在就等同于“newTween”了（就是我們的tween對(duì)象）。
現(xiàn)在我們把這些東西放在一起看看：
參考代碼：
// 這里是我們的函數(shù)
var newTweenSet = function() {
// 由于我們使用了bind，現(xiàn)在"this"就指向了"newTween"
// 因此，這里的相當(dāng)于是：
// newTween.set('width', '300px')
this.set('width', '300px');
}
window.addEvent('domready', function() {
// 首先把我們的元素賦值給一個(gè)變量
var newTweenElement = $('newTween');
// 然后我們new一個(gè)FX.Tween，然后賦值給一個(gè)變量
var newTween = new Fx.Tween(newTweenElement);
// 現(xiàn)在添加我們的事件，并綁定newTween和newTweenSet
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});
啟動(dòng)一個(gè)漸變效果
現(xiàn)在，我們已經(jīng)設(shè)置好了我們所有的漸變對(duì)象，我們的函數(shù)在domready事件之外，我們也學(xué)習(xí)了如何通過(guò).set();方法設(shè)置一個(gè)樣式表屬性，我們來(lái)看看實(shí)際的漸變。啟動(dòng)一個(gè)漸變非常簡(jiǎn)單，和.fade();非常類似，總共有兩種方式來(lái)使用.start();方法：
讓一個(gè)屬性值從當(dāng)前值變化到另外一個(gè)值
先設(shè)置一個(gè)屬性值，然后變化到另外一個(gè)值
參考代碼：
// 這將讓寬度（width）從當(dāng)前已經(jīng)存在的值變化到300px
newTween.start('width', '300px');
// 這將首先設(shè)置寬度（width）為100px，然后變化到300px
newTween.start('width', '100px', '300px');
現(xiàn)在，你就可以在一個(gè)函數(shù)內(nèi)部通過(guò)使用.start();方法來(lái)啟動(dòng)這個(gè)漸變了，如果你使用了在函數(shù)上通過(guò).bind();方法綁定了“newTween”，你可以使用“this”。
以上這些就是到現(xiàn)在為止全部的漸變（tween）了……
盡管如此，關(guān)于漸變效果仍然有許多可以講的。例如，如果你想一次同時(shí)“漸變”多個(gè)樣式表屬性，你可以使用.morph();方法。你還可以使用過(guò)渡效果庫(kù)（transition）來(lái)改變它們進(jìn)行過(guò)渡。不過(guò)這篇教程已經(jīng)足夠長(zhǎng)了，因此我們把這些留在以后再講。
Tween的快捷方法
我們通常都從“基本知識(shí)”入手，不過(guò)MooTools 1.2只為漸變（tween）提供了這樣極其出色的快捷方法，它們使用起來(lái)都極其簡(jiǎn)單以至于我忍不住要從這里開(kāi)始。
.tween();
一個(gè)漸變（tween）是一個(gè)在兩個(gè)樣式屬性值之間的平滑的變化。舉個(gè)例子，通過(guò)漸變（tween）你可以把div的寬度（width）平滑地由100像素變化為300像素。
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)新的函數(shù)
var tweenerFunction = function() {
// 選中你要使用漸變的元素
// 然后加上.tween
// 最后聲明你要變化到的屬性和值
$('tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
// 在這里給一個(gè)按鈕添加一個(gè)事件
// 當(dāng)點(diǎn)擊時(shí)初始化這個(gè)漸變
// 并調(diào)用我們的漸變函數(shù)
$('tween_button').addEvent('click', tweenerFunction);
});
相應(yīng)于上面的代碼，我們的HTML代碼看起來(lái)大概應(yīng)該是這樣的：
參考代碼：
復(fù)制代碼 代碼如下:
<div id="tweener"></div>
<button id="tween_button">300 width</button>
.fade();
這個(gè)方法可以讓你平滑地調(diào)整一個(gè)元素的不透明度（opacity）。這個(gè)使用起來(lái)和上面的例子幾乎一模一樣：
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)新函數(shù)
var tweenFadeFifty = function() {
// 在這里創(chuàng)建你的選擇器
// 然后添加.fade
// 最后聲明一個(gè)0到1之間的值（0代表不可見(jiàn)，1代表完全可見(jiàn)）
$('tweener').fade('.5');
}
window.addEvent('domready', function() {
// 在這里給按鈕添加一個(gè)事件
// 點(diǎn)擊時(shí)初始化這個(gè)漸變
// 并調(diào)用我們的漸變函數(shù)
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
參考代碼：
復(fù)制代碼 代碼如下:
<div id="tweener">
<button id="tween_fade_fifty">Fade to fifty percept opacity</button>
.highlight();
醒目（highlight）是一個(gè)目標(biāo)非常明確（也極其有用）的漸變快捷方法，它提供了兩個(gè)功能：
使用它來(lái)平滑變化到一種不同的背景色
直接設(shè)置一個(gè)不同的背景色，然后平滑變化到另外一個(gè)背景色
這些在創(chuàng)建用戶反饋時(shí)非常有用。例如，你可以在一個(gè)東西被選中時(shí)讓某個(gè)元素閃一下，或者你改變一下顏色，然后當(dāng)它保存或者關(guān)閉時(shí)再閃一下。這有非常多的選擇，而且非常簡(jiǎn)單易用。在這個(gè)例子中，讓我們創(chuàng)建兩個(gè)div，然后分別添加兩種類型的醒目（highlight）方法：
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)函數(shù)
var tweenHighlight = function(event) {
// 這里我們使用了event.target，這是從這個(gè)函數(shù)中傳過(guò)來(lái)的參數(shù)
// 這個(gè)意思是指“觸發(fā)事件的目標(biāo)（來(lái)源）”
// 由于這個(gè)效果應(yīng)用到觸發(fā)事件的元素上面
// 因此我們不需要再創(chuàng)建選擇器
// 注意：addEvent將會(huì)自動(dòng)把event對(duì)象作為參數(shù)傳入這個(gè)調(diào)用函數(shù)
// ... 非常方便
event.target.highlight('#eaea16');
}
// 創(chuàng)建一個(gè)函數(shù)
// 你需要傳入一個(gè)參數(shù)
// 由于這個(gè)函數(shù)是在一個(gè)事件（event）里面被調(diào)用的
// 這個(gè)函數(shù)將會(huì)自動(dòng)傳入event對(duì)象
// 然后你就可以通過(guò).target來(lái)引用這個(gè)元素
// （event的目標(biāo)元素）
var tweenHighlightChange = function(item) {
// 這里我們不是使用一個(gè)顏色，而是添加了一個(gè)逗號(hào)來(lái)分隔第二個(gè)
// 這將設(shè)置第一個(gè)顏色，然后變化到第二個(gè)顏色
item.target.highlight('#eaea16', '#333333');
}
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
參考代碼：
復(fù)制代碼 代碼如下:
<div id="tweener"></div>
<div id="tweenerChange"></div>
快捷方法示例
這里是一些效果的快捷方法的在線的示例。你可以按不同順序點(diǎn)擊這些按鈕，然后注意一下它們的變化：
參考代碼：
復(fù)制代碼 代碼如下:
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
// .fade 也可以接受'out'和'in'作為參數(shù)，相當(dāng)于0和1
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
event.target.highlight('#eaea16');
}
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
參考代碼：
復(fù)制代碼 代碼如下:
<div id="tweener"></div><br />
<button id="tween_button">300 width</button>
<button id="tween_reset">100 width</button>
<button id="tween_fade_out">Fade Out</button>
<button id="tween_fade_fifty">Fade to 50% opacity</button>
<button id="tween_fade_in">Fade In</button>
參考代碼：
復(fù)制代碼 代碼如下:
#tweener {
height: 100px
width: 100px
background-color: #3399CC
}
把鼠標(biāo)移上去可以看到第一種類型的醒目效果。
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
更多漸變（Tween）
創(chuàng)建一個(gè)新的漸變
如果你想更靈活多變和更多地控制你的變化效果，你可能想創(chuàng)建一個(gè)新的形變動(dòng)畫(huà)來(lái)替代那些快捷方式。注意使用“new”來(lái)創(chuàng)建一個(gè)新的Fx.Tween的實(shí)例：
參考代碼：
復(fù)制代碼 代碼如下:
window.addEvent('domready', function() {
// 首先我們把要變化的元素賦值給一個(gè)變量
var newTweenElement = $('newTween');
// 現(xiàn)在我們創(chuàng)建一個(gè)動(dòng)畫(huà)事件，然后把這個(gè)元素作為參數(shù)傳入
var newTween = new Fx.Tween(newTweenElement);
});
參考代碼：
復(fù)制代碼 代碼如下:
<!-- 這個(gè)是我們要應(yīng)用漸變效果的元素 -->
<div id="newTween"></div>
<!-- 這個(gè)是啟動(dòng)漸變效果的按鈕 -->
<button id="netTween_set">Set</div>
通過(guò)漸變?cè)O(shè)置樣式
一旦你從一個(gè)元素創(chuàng)建了一個(gè)新的漸變，你可以輕松地通過(guò).set()方法設(shè)置一個(gè)樣式屬性。這個(gè)和.setStyle()方法一樣。
參考代碼：
復(fù)制代碼 代碼如下:
var newTweenSet = function() {
// 注意"this"的使用
// 學(xué)習(xí)如何使用"this"
this.set('width', '300px');
}
就像我們以前學(xué)習(xí)的，我們想要把我們的函數(shù)從domready事件中獨(dú)立出來(lái)，但是在這個(gè)例子中，我們想要在domready事件中創(chuàng)建一個(gè)漸變，然后在外部引用它。我們已經(jīng)掌握了一種在domready之外傳遞參數(shù)的方法（通過(guò)創(chuàng)建一個(gè)匿名函數(shù)并傳遞一個(gè)參數(shù)），今天我們要學(xué)習(xí)一種Moo化的更好的方式來(lái)傳遞漸變對(duì)象（這并不是說(shuō)匿名函數(shù)在任何時(shí)候都不再合適）。
.bind();
通過(guò).bind();，我們可以讓一個(gè)函數(shù)里面的“this”等同于參數(shù)：
參考代碼：
復(fù)制代碼 代碼如下:
// 首先我們給上面我們看到的那個(gè)按鈕添加一個(gè)點(diǎn)擊事件
// 然后，不只是僅僅調(diào)用這個(gè)函數(shù)
// 我們調(diào)用這個(gè)函數(shù)并且添加".bind()"
// 然后我們替換掉任何我們要傳遞給函數(shù)的
// 現(xiàn)在，在這個(gè)"newTweenSet"函數(shù)內(nèi)部，"this"將指向"newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
因此，現(xiàn)在我們?cè)倏纯瓷厦娴倪@個(gè)函數(shù)，“this”現(xiàn)在就等同于“newTween”了（就是我們的tween對(duì)象）。
現(xiàn)在我們把這些東西放在一起看看：
參考代碼：
復(fù)制代碼 代碼如下:
// 這里是我們的函數(shù)
var newTweenSet = function() {
// 由于我們使用了bind，現(xiàn)在"this"就指向了"newTween"
// 因此，這里的相當(dāng)于是：
// newTween.set('width', '300px')
this.set('width', '300px');
}
window.addEvent('domready', function() {
// 首先把我們的元素賦值給一個(gè)變量
var newTweenElement = $('newTween');
// 然后我們new一個(gè)FX.Tween，然后賦值給一個(gè)變量
var newTween = new Fx.Tween(newTweenElement);
// 現(xiàn)在添加我們的事件，并綁定newTween和newTweenSet
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});
啟動(dòng)一個(gè)漸變效果
現(xiàn)在，我們已經(jīng)設(shè)置好了我們所有的漸變對(duì)象，我們的函數(shù)在domready事件之外，我們也學(xué)習(xí)了如何通過(guò).set();方法設(shè)置一個(gè)樣式表屬性，我們來(lái)看看實(shí)際的漸變。啟動(dòng)一個(gè)漸變非常簡(jiǎn)單，和.fade();非常類似，總共有兩種方式來(lái)使用.start();方法：
讓一個(gè)屬性值從當(dāng)前值變化到另外一個(gè)值
先設(shè)置一個(gè)屬性值，然后變化到另外一個(gè)值
參考代碼：
復(fù)制代碼 代碼如下:
// 這將讓寬度（width）從當(dāng)前已經(jīng)存在的值變化到300px
newTween.start('width', '300px');
// 這將首先設(shè)置寬度（width）為100px，然后變化到300px
newTween.start('width', '100px', '300px');
現(xiàn)在，你就可以在一個(gè)函數(shù)內(nèi)部通過(guò)使用.start();方法來(lái)啟動(dòng)這個(gè)漸變了，如果你使用了在函數(shù)上通過(guò).bind();方法綁定了“newTween”，你可以使用“this”。
以上這些就是到現(xiàn)在為止全部的漸變（tween）了……
盡管如此，關(guān)于漸變效果仍然有許多可以講的。例如，如果你想一次同時(shí)“漸變”多個(gè)樣式表屬性，你可以使用.morph();方法。你還可以使用過(guò)渡效果庫(kù)（transition）來(lái)改變它們進(jìn)行過(guò)渡。不過(guò)這篇教程已經(jīng)足夠長(zhǎng)了，因此我們把這些留在以后再講。
更多學(xué)習(xí)……
包含一個(gè)MooTools 1.2的庫(kù)，上面的例子，一個(gè)外部JavaScript文件，一個(gè)簡(jiǎn)單的HTML文件和一個(gè)CSS文件。
和以前一樣，你最好的資源是MooTools 1.2的文檔。
- 關(guān)于.tween();方法的信息
- 還有，瀏覽一下.morph();方法和transitions庫(kù)
相關(guān)文章
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯(cuò)的效果。2010-05-05
MooTools 1.2中的Drag.Move來(lái)實(shí)現(xiàn)拖放
今天我們開(kāi)始第十二講，今天我們將仔細(xì)看一下Drag.Move——一個(gè)很強(qiáng)大的MooTools類，它可以讓你給你的web應(yīng)用添加拖放功能。2009-09-09
Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會(huì)返回?cái)?shù)組（一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表）。2009-09-09
Mootools 1.2教程 輸入過(guò)濾第一部分（數(shù)字）
今天我們來(lái)看看MooTools是怎樣使得過(guò)濾用戶輸入變得非常輕松。我們今天將講一些基本的數(shù)字過(guò)濾，明天再更深入地講講字符串過(guò)濾。2009-09-09
基于mootools 1.3框架下的圖片滑動(dòng)效果代碼
容器采用相對(duì)定位,圖片采用絕對(duì)定位,當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的圖片上,改變?nèi)eft屬性,用tween實(shí)現(xiàn)動(dòng)畫(huà)效果.2011-04-04
通過(guò)Mootools 1.2來(lái)操縱HTML DOM元素
今天我們來(lái)深入地學(xué)習(xí)一下如果操縱HTML元素。通過(guò)MooTools 1.2，你可以添加新元素到一個(gè)HTML頁(yè)面中，也可以刪除元素，以及改變?nèi)魏螛邮交蛘咴貐?shù)，這些都非常容易。2009-09-09
Mootools 1.2教程 選項(xiàng)卡效果（Tabs）
今天將不只是受限于這個(gè)庫(kù)和一些基本的編程知識(shí)，我們來(lái)做一個(gè)簡(jiǎn)單的小項(xiàng)目。通過(guò)使用我們目前為止已經(jīng)學(xué)過(guò)的一些知識(shí)，有幾種方式來(lái)創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。2009-09-09
做圓角邊框一般有兩種方法，背景圖片或者DIV+CSS拼出來(lái)。2010-02-02
從今天開(kāi)始，我們將開(kāi)始講解“更多”（more）庫(kù)里面的更多插件。Sortables是一個(gè)非常強(qiáng)大的插件，能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。2009-09-09
Mootools 1.2 手風(fēng)琴（Accordion）教程
繼續(xù)我們的“更多”（More）庫(kù)里面的插件教程，今天我們來(lái)學(xué)習(xí)一下可能是最流行最受歡迎的插件——手風(fēng)琴。2009-09-09