JSFiddle - React, Tailwind, and code Playground
HTML
<img class="moopuffy" src="http://info.my-office1.ru/images/Digital1.jpg" border="0" style="border: 0; width: 400px;" />
JavaScript
var Moopuffy_ck = new Class({
Implements: Options,
options: { //options par défaut si aucune option utilisateur n'est renseignée
mooDuree : 500,
ratio : 1.3
},
initialize: function(items, options) {
this.setOptions(options);
var maduree = this.options.mooDuree;
var ratio = this.options.ratio;
items.each(function(item){
item.addEvent('mouseover', function(e) {
e = new Event(e).stop();
var itemCoordinates = this.getCoordinates();
var largeur = this.offsetWidth*ratio;
var hauteur = this.offsetHeight*ratio;
var clonetop = itemCoordinates['top']-((hauteur - this.offsetHeight)/2);
var cloneleft = itemCoordinates['left']-((largeur - this.offsetWidth)/2);
var clone = this.clone()
.setStyles(itemCoordinates) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({
'opacity': 0.7,
'position': 'absolute'
})
.addEvent('emptydrop', function() {
this.destroy();
}).inject(document.body);
var fx = new Fx.Morph(clone, {
duration:maduree,
wait:false
});
fx.start({
'width': largeur,
'height': hauteur,
'top' : clonetop,
'left' : cloneleft,
'opacity' : 0
});
animCompPuffy = function(){
clone.destroy();
}
//fx.addEvent ('onComplete', animCompPuffy.bind(this));
});
});
}
});
Moopuffy_ck.implement(new Options);
window.addEvent('domready', function() {
new Moopuffy_ck($$('.moopuffy'),...