Cliquez sur l'image pour produire l'effet

Code du plug-in :

ani : 4, //Effet d'animation. 1. La mosaïque se rassemble vers le centre, 2. Le coin supérieur gauche de la mosaïque se rassemble, 3. La mosaïque se retire et disparaît, 4. Zoom sur place
délai : 3000, //Temps d'exécution de l'animation
url : "0", //Chemin de l'image
compte : [20, 20]//Le nombre de mosaïques dans le sens horizontal et le nombre dans le sens vertical ; le nombre ne peut pas être trop grand, sinon le montant du calcul sera trop important et l'ordinateur ne pourra pas l'exécuter, provoquant le blocage du navigateur
}
$.fn.gysMaSaiKe = function (. opt) {
opt = $.extend({}, defaults, opt);
if(opt.url== "0"){alert("Le paramètre de chemin d'image n'est pas renseigné");return ;}
var obj = $(this);
if (obj.css("position") == "static") obj .css({ "position": "relative" }); obj.css("overflow","hidden");
var objWidth = obj.width();
var objHeight =
(function (count,url, obj) {
var littleBoxWidth = Math.floor(objWidth / count[0]);
var littleBoxHeight = Math.floor(objHeight / count[1 ]);
var html = ""
var littleBoxLeft; = littleBoxWidth * (-1), littleBoxTop = littleBoxHeight * (-1);

for (var i = 0; i < count[1]; i ) {//Row
littleBoxTop = littleBoxHeight ;
for (var j = 0; j < count[0]; j ) {//Span style='display : bloc;position:absolu;gauche:" littleBoxLeft "px;top:" littleBoxTop "px;largeur:" littleBoxWidth "px; hauteur:" littleBoxHeight " px; background-image:url(" url ");background-position:" (littleBoxLeft) * (-1) "px " (littleBoxTop) * (-1) "px;'>"
}
littleBoxLeft = littleBoxWidth * (-1); >}
obj.html(html);
})(opt.count,opt.url,obj);

var animation = function (ani, delay, objs) {
var res = function () { }
if (ani == 1) {//La mosaïque se rassemble vers le milieu
res = function ( ) {
objs.animate({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay);
setTimeout(function(){obj.html("");},delay );
}
}
else if ( ani == 2) {//Les fragments se rassemblent vers le coin supérieur gauche et disparaissent
res = function () {
objs.animate({ left: 0 , top: 0, opacity: 0 }, delay) ; setTimeout(function () { obj.html(""); }, delay
}
}
else if (ani == 3 ) {//Tirez et disparaissez
res = function () {
objs.filter(":even").animate({top:-100,left:-100},delay
objs.filter(":odd").animate({); top : -100, left:900}, delay); setTimeout(function(){obj.html("");},delay);
}
}
else if (ani == 4 ) {//
res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html ("");},delay }
}
else {
res = function () { objs.animate({ hauteur : 0, largeur : 0 }, délai);setTimeout(function( ){obj.html("");} ,delay); }
}
return res;
} (opt.ani, opt.delay, obj.children()); span", animation);
}
})(jQuery);


Code CSS :




Copier le code

Copier le code