I used jQuery to write a picture mosaic disappearing effect_jquery

One of the effects:

html code:

Copy code The code is as follows:

Click the picture to produce the effect

Plug-in code:

Copy code The code is as follows:

; (function ($) {
var defaults = {
ani: 4, //Animation effect. 1. The mosaic gathers toward the center, 2. The upper left corner of the mosaic gathers, 3. The mosaic pulls and disappears, 4. Zooms in place
delay: 3000, //Animation execution Time
url: "0", //Picture path
count: [20, 20]//The horizontal number of mosaics, the vertical number; the number cannot be too many, otherwise the calculation amount will be too large and the computer cannot execute it. Causing the browser to freeze
}
$.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 ) {//Row
littleBoxTop = littleBoxHeight;
for (var j = 0; j < count[0]; j ) {//Single span in each row
littleBoxLeft = littleBoxWidth;
html = "";
}
littleBoxLeft = littleBoxWidth * (-1);
}
obj.html(html);
})(opt.count,opt.url,obj);

var animation = function (ani, delay, objs) {
var res = function () { }
if (ani == 1) {//The mosaic gathers towards the middle
res = function ( ) {
objs.animate({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay);
setTimeout(function(){obj.html("");},delay );
}
}
else if (ani == 2) {//The fragments gather towards the upper left corner and disappear
res = function () {
objs.animate({ left: 0 , top: 0, opacity: 0 }, delay); setTimeout(function () { obj.html(""); }, delay);
}
}
else if (ani == 3 ) {//Pull and disappear
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 The code is as follows:

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

Plug-in call:

Copy code The code is as follows:

$(function () {
$(".box").gysMaSaiKe({
count: [10, 15], //The number of mosaics in the horizontal direction and the number in the vertical direction; the number cannot be too many, otherwise the calculation amount will be too large and the computer cannot execute it. Causing the browser to freeze
ani: 4, //Animation effect. 1. The mosaic gathers toward the center, 2. The upper left corner of the mosaic gathers, 3. The mosaic pulls and disappears, 4. Zooms out in place
delay: 5000, / /Animation execution time
url: "1.jpg" //Picture path
});
});