MooTools - Fx.Morph
Fx.Morph est une fonction fournie par MooTools. Il est utilisé pour créer une nouvelle interpolation pour les transitions entre les propriétés de style. Lors du morphing, nous devons sélectionner l'élément avec un objet, puis nous pouvons lui appliquer différentes fonctions. Nous devons également lier l'élément avec une interpolation nouvellement créée.
Prenons un exemple qui fournit trois boutons sur une page Web. Le premier est leSETbouton qui crée un élément avec des propriétés de style telles que la hauteur, la largeur et la couleur. Le second est leMORPHbouton qui modifie les propriétés de style d'un élément. Le troisième est leRESETbouton qui change tous les paramètres à la position de départ. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -