J'ai utilisé jQuery pour écrire une mosaïque d'images qui disparaît effect_jquery

Un des effets :

Code html :

Copier le code Le code est le suivant :

Cliquez sur l'image pour produire l'effet

Code du plug-in :

Copier le code Le code est le suivant : (fonction ( $) {

var defaults = {

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

Le code est le suivant :

.box { width: 1000px; height:600px;} Appel du plug-in :

Copier le code

Le code est le suivant :

$(function() { $( ".box").gysMaSaiKe({ count: [10, 15], //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 être trop grand et l'ordinateur ne peut pas l'exécuter, ce qui provoque le blocage du navigateur 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. Le. la mosaïque disparaît lorsqu'elle est tirée, 4. Effectue un zoom arrière sur place délai : 5000, / /Durée d'exécution de l'animationurl : "1.jpg" //Chemin de l'image}

} ); 🎜>