html代码:
Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 16:50:18
original
1264 Les gens l'ont consulté

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 :

} ); 🎜>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal