MooTools - Fx.Morph
Fx.Morph ist eine Funktion von MooTools. Es wird verwendet, um ein neues Tween für Übergänge zwischen Stileigenschaften zu erstellen. Während des Morphings müssen wir das Element mit einem Objekt auswählen und können dann verschiedene Funktionen darauf anwenden. Wir müssen das Element auch mit einem neu erstellten Tween binden.
Nehmen wir ein Beispiel mit drei Schaltflächen auf einer Webseite. Der erste ist derSETSchaltfläche, mit der ein Element mit Stileigenschaften wie Höhe, Breite und Farbe erstellt wird. Der zweite ist derMORPHSchaltfläche, die die Stileigenschaften eines Elements ändert. Der dritte ist derRESETSchaltfläche, mit der alle Einstellungen in die Ausgangsposition geändert werden. Schauen Sie sich den folgenden Code an.
Beispiel
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement);
$('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject));
$('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Sie erhalten folgende Ausgabe: