Klicken Sie auf das Bild, um den Effekt zu erzeugen

Plug-in-Code:

ani: 4, //Animationseffekt 1. Das Mosaik sammelt sich zur Mitte hin, 2. Die obere linke Ecke des Mosaiks sammelt sich, 3. Das Mosaik wird gezogen und verschwindet, 4. Zoomt an Ort und Stelle
Verzögerung: 3000, //Animationsausführungszeit
URL: „0“, //Bildpfad
Anzahl: [20, 20]//Die Anzahl der Mosaike in horizontaler Richtung und die Zahl in vertikaler Richtung; die Zahl darf nicht zu groß sein, sonst wird der Berechnungsbetrag zu groß und der Computer kann ihn nicht ausführen.
}
$.fn.gysMaSaiKe = function ( opt) {
opt = $.extend({}, defaults, opt);
if(opt.url== "0"){alert("Der Bildpfadparameter ist nicht ausgefüllt");return ;}
var obj = $(this);
if (obj.css("position") == "static") obj .css({ "position": "relative" }); obj.css("overflow","hidden");
var objWidth();
var objHeight = obj();
var littleBoxWidth = Math.floor(objWidth / count[0]);
var littleBoxHeight = Math.floor(objHeight / count[1 ]);
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 ) {//Einzelner Bereich in jeder Zeile
littleBoxLeft = littleBoxWidth; block;position:absolute;left:" littleBoxLeft "px;top:" littleBoxTop "px;width:" littleBoxWidth "px; height:" littleBoxHeight " px;background-position:" (littleBoxLeft) * (-1) "px " (littleBoxTop) * (-1) "px;'>"; >}
obj.html(html);
})(opt.count,opt.url,obj); var res = function () { }
if (ani == 1) {//Das Mosaik sammelt sich zur Mitte hin
res = function ( ) {
objs.animate({ top: objHeight / 2, links: objWidth / 2, Deckkraft: 0 }, Verzögerung);
setTimeout(function(){obj.html("");},delay }
}
else if ( ani == 2) {//Die Fragmente sammeln sich in der oberen linken Ecke und verschwinden
res = function () {
objs.animate({ left: 0 , top: 0, opacity: 0 }, delay) ; setTimeout(function () { obj.html(""); }, Verzögerung); function () {
objs.filter(":even").animate({top:-100,left:-100},delay); top: -100, left:900}, Verzögerung); setTimeout(function(){obj.html("");},delay); ) {//
res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html ("");},delay }
}
else {
res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function( ){obj.html("");} ,delay); }
}
return res;
} (opt.ani, opt.delay, obj.children());

obj.on("click", " span", Animation);
}
})(jQuery);


CSS-Code:




Code kopieren


Der Code lautet wie folgt:


.box { width: 1000px; height:600px;}


Plug-in-Aufruf:




Code kopieren