Ich habe jQuery verwendet, um ein Bildmosaik zu schreiben, das effect_jquery verschwindet

Einer der Effekte:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Klicken Sie auf das Bild, um den Effekt zu erzeugen

Plug-in-Code:

Code kopieren Der Code lautet wie folgt: (Funktion ( $) {

var defaults = {

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

Der Code lautet wie folgt:

$(function () { $( ".box").gysMaSaiKe({ count: [10, 15], //Die Anzahl der Mosaike in horizontaler Richtung und die Anzahl in vertikaler Richtung; die Anzahl darf nicht zu groß sein, da sonst der Berechnungsbetrag sinkt zu groß sein und der Computer kann es nicht ausführen. ani: 4, //Animationseffekt 1. Das Mosaik wird zur Mitte hin gesammelt, 2. Die obere linke Ecke des Mosaiks wird gesammelt Mosaik verschwindet beim Ziehen, 4. Verkleinert sich an Ort und Stelle Verzögerung: 5000, / /Animationsausführungszeiturl: "1.jpg" //Bildpfad

});