Myself with jquery wrote a picture of the mosaic vanishing effect

This article mainly introduces the use of jquery to write a picture of the mosaic vanishing effect of the implementation process, the need for friends can refer to the

One of the effects:

HTML code:
The code is as follows:
<div class= "box" ></div>

Plug-in code:
Code is as follows:
; (function ($) {
var defaults = {
Ani:4,//animation effect. 1. Mosaics gather in the middle, 2. Mosaic pulls away, 3. Mosaic pull disappears, 4. Zoom Out
delay:3000,//Animation execution
URL: "0",//Picture path
Count: [20, 20]//mosaic level quantity, vertical direction quantity; Quantity cannot be too much, otherwise the computation is too big, the computer cannot execute, cause browser card to die
}
$.fn.gysmasaike = Fu Nction (opt) {
opt = $.extend ({}, defaults, opt);
if (opt.url== "0") {alert ("No picture path parameters are filled in");
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++) {//Line
Littleboxtop + = Littleboxheight;
for (var j = 0; J < Count[0], J + +) {//single span in each row
Littleboxleft + = Littleboxwidth;
HTML + + <span style= ' display:block;position:absolute;left: "+ Littleboxleft +" Px;top: "+ littleboxtop +" Px;widt H: "+ 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 to the center
res = function () {
Objs.animate ({top:objheight/2, LEFT:OBJWIDTH/2, opacity:0}, delay);
settimeout (function () {obj.html ("");},delay);
}
}
Else if (ani = 2) {//fragmented to the top 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:-1 00},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 ({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:
. box {width:1000px; height:600px;}

Calls to Plug-ins:
The code is as follows:
$ (function () {
$ (". Box"). Gysmasaike ({
Count: [10, 15],//Mosaic level quantity, vertical direction quantity, quantity cannot be too much, otherwise the computation amount is too big, the computer cannot execute, cause the browser card to die
Ani:4,//animation effect. 1. Mosaics gather in the middle, 2. Mosaic in the upper left corner, 3. Mosaic pull disappears, 4. Shrink in situ
delay:5000,//Animation execution time
URL: "1.jpg"//Picture path
});
});