Myself with jquery wrote a picture of the mosaic disappearing effect _jquery

One of the effects:

HTML code:

Copy Code code as follows:

<div class= "box" ></div>

Plug-in code:

Copy Code code as follows:

; (function ($) {
var defaults = {
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:3000,//Animation execution time
URL: "0",//Picture path
Count: [20, 20]//mosaic level quantity, vertical direction quantity, quantity cannot be too much, otherwise the computation amount is too big, the computer cannot execute, cause browser card to die
}
$.fn.gysmasaike = function (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;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 () {obj.html ("");},delay);
}
}
else if (ANI = 2) {//fragments gathered and disappeared in 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}, 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:

Copy Code code as follows:

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

Calls to Plug-ins:

Copy Code code 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
});
});