Oneself used jQuery to write a picture of the Mosaic disappear effect

One of the effects:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405041505533.gif? 20144415623 ">  
HTML code:

 
<h1> Click on the picture , Have an effect </h1> 
<div class="box"></div> 

Plug-in code:

 
; (function ($) { 
var defaults = { 
ani: 4, //Animation: 1. The mosaics move towards the center,2. The mosaics move towards the upper left corner,3. The mosaics pull away,4
delay: 3000, //Animation execution time
url:"0",//Image path
count: [20, 20]//Number of horizontal and vertical mosaics; The amount should not be too much, otherwise the computation is too large, the computer can not execute, resulting in browser jam
} 
$.fn.gysMaSaiKe = function (opt) { 
opt = $.extend({}, defaults, opt); 
if(opt.url=="0"){alert(" The image path parameter is not filled in ");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++) {// line  
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) {//The mosaics converge toward the center
res = function () { 
objs.animate({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay); 
setTimeout(function(){obj.html("");},delay); 
} 
} 
else if (ani == 2) {//The debris gathered towards the upper left corner and disappeared
res = function () { 
objs.animate({ left: 0, top: 0, opacity: 0 }, delay); setTimeout(function () { obj.html(""); }, delay); 
} 
} 
else if (ani == 3) {//Pull away
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); 

The CSS code:

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

Plug-in call:

 
$(function () { 
$(".box").gysMaSaiKe({ 
count: [10, 15], //Number of horizontal and vertical mosaics; The amount should not be too much, otherwise the computation is too large, the computer can not execute, resulting in browser jam
ani: 4, //Animation: 1. The mosaics move towards the center,2. The mosaics move towards the upper left corner,3. The mosaics pull away,4
delay: 5000, //Animation execution time
url: "1.jpg" //Image path
}); 
});