I wrote an image mosaic disappear effect using jQuery.

One effect:
 
Html code:
Copy codeThe Code is as follows:
<H1> click an image to produce results <Div class = "box"> </div>

Plug-in code:
Copy codeThe Code is as follows:
; (Function ($ ){
Var defaults = {
Ani: 4, // animation effect. 1. Mosaic to the middle, 2. Mosaic to the upper left corner, 3. Mosaic pull disappears, 4. Zoom out
Delay: 3000, // animation execution time
Url: "0", // image path
Count: [20, 20] // number of horizontal mosaics in the vertical direction; the number cannot be too large; otherwise, the computation is too large and the computer cannot execute, causing the browser to become stuck
}
$. Fn. gysMaSaiKe = function (opt ){
Opt = $. extend ({}, defaults, opt );
If (opt. url = "0") {alert ("image path Parameter not filled"); return ;}
Var obj = $ (this );
If (obj.css ("position") = "static") obj.css ({"position": "relative "});
Obj.css ("overflow", "hidden ");
Var objWidth = obj. width ();
Var objHeight = obj. height ();
(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 ++) {// a single span in each row
LittleBoxLeft + = littleBoxWidth;
Html + = "<span style = 'display: block; position: absolute; left:" + littleBoxLeft + "px; top:" + littleBoxTop + "px; width: "+ littleBoxWidth +" px; height: "+ littleBoxHeight +" px; background-image: url ("+ url +"); background-position: "+ (littleBoxLeft) * (-1) + "px" + (littleBoxTop) * (-1) + "px; '> </span> ";
}
LittleBoxLeft = littleBoxWidth * (-1 );
}
Obj.html (html );
}) (Opt. count, opt. url, obj );

Var animation = function (ani, delay, objs ){
Var res = function (){}
If (ani = 1) {// mosaic gathers in the middle
Res = function (){
Objs. animate ({top: objHeight/2, left: objWidth/2, opacity: 0}, delay );
Settimeout(function(registry.obj.html ("") ;}, delay );
}
}
Else if (ani = 2) {// fragment disappears to the upper left corner
Res = function (){
Objs. animate ({left: 0, top: 0, opacity: 0}, delay); setTimeout (function () {obj.html ("") ;}, delay );
}
}
Else if (ani = 3) {// pull disappears
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}, delay1_settimeout(function(1_1_obj.html ("") ;}, delay );}
}
Else {
Res = function () {objs. animate ({height: 0, width: 0}, delay1_settimeout(function(1_1_obj.html ("") ;}, delay );}
}
Return res;
} (Opt. ani, opt. delay, obj. children ());

Obj. on ("click", "span", animation );
}
}) (JQuery );

Css code:
Copy codeThe Code is as follows:
. Box {width: 1000px; height: 600px ;}

Plug-in call:
Copy codeThe Code is as follows:
$ (Function (){
$ (". Box"). gysMaSaiKe ({
Count: [10, 15], // number of horizontal mosaics in the vertical direction; the number cannot be too large; otherwise, the computation is too large and the computer cannot execute, causing the browser to become stuck
Ani: 4, // animation effect. 1. Mosaic to the middle, 2. Mosaic to the upper left corner, 3. Mosaic pull disappears, 4. Zoom out
Delay: 5000, // animation execution time
Url: "1.jpg" // image path
});
});