html代码:

Maison  >  Article  >  interface Web  >  J'ai utilisé jQuery pour écrire une mosaïque d'images qui disparaît effect_jquery

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

WBOY
WBOYoriginal
2016-05-16 16:50:181237parcourir

Un des effets :
J'ai utilisé jQuery pour écrire une mosaïque d'images qui disparaît effect_jquery
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 :

} ); 🎜>
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn