Himself wrote a picture of the Mosaic vanishing effect (jQuery)

One of the effects:

HTML code:

< H1 > Click the picture to produce the effect </H1>    <class= " Box "></div>

Plugin code:

1; (function ($) {2             varDefaults = {3Ani:4,//The animation effect. 1. The mosaic gathers in the middle, 2. The top left corner of the mosaic gathers, 3. Mosaic pulls disappear, 4. Shrinking in situ4delay:3000,//Animation Execution Time5URL: "0",//Picture Path6Count: [20, 20]//mosaic level number, vertical direction number, the number can not be too high, otherwise the calculation is too large, the computer can not execute, causing the browser to die7             }8$.fn.gysmasaike =function(opt) {9opt =$.extend ({}, defaults, opt);Ten                 if(opt.url== "0") {Alert ("does not fill in the picture path parameter");return;} One                 varobj = $ ( This);  A                 if(Obj.css ("position") = = "Static") Obj.css ({"Position": "Relative" }); -Obj.css ("Overflow", "hidden"); -                 varObjwidth =obj.width (); the                 varObjheight =obj.height (); -(function(Count,url, obj) { -                     varLittleboxwidth = Math.floor (objwidth/count[0]); -                     varLittleboxheight = Math.floor (objheight/count[1]);  +                     varhtml = ""; -                     varLittleboxleft = Littleboxwidth * ( -1), littleboxtop = Littleboxheight * (-1); +  A                      for(vari = 0; i < count[1]; i++) {//Line atLittleboxtop + =Littleboxheight; -                          for(varj = 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); in                     } - obj.html (HTML); to }) (opt.count,opt.url,obj); +  -                 varAnimation =function(ANI, delay, OBJS) { the                     varres =function () { } *                     if(ANI = = 1) {//the mosaic gathers in the middle $res =function () {Panax NotoginsengObjs.animate ({TOP:OBJHEIGHT/2, LEFT:OBJWIDTH/2, opacity:0}, delay); -SetTimeout (function() {obj.html (""));},delay); the                         } +                     } A                     Else if(ANI = = 2) {//the top left corner of the Shard disappears. theres =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); theObjs.filter (": Odd"). Animate ({top: -100, left:900}, delay); SetTimeout (function() {obj.html (""));},delay);  -                         }Wuyi                     } the                     Else if(ANI = = 4) {// -res =function() {objs.animate ({height:0, width:0}, delay); SetTimeout (function() {obj.html (""));},delay); } Wu                     } -                     Else { Aboutres =function() {objs.animate ({height:0, width:0}, delay); SetTimeout (function() {obj.html (""));},delay); } $                     } -                     returnRes; - } (Opt.ani, Opt.delay, Obj.children ()); -  AObj.on ("Click", "span", animation); +             } the}) (JQuery);

CSS code:

1   {width: 1000px; height: 600px;}  

Plug-in invocation:

1$(function () {2$ (". Box"). Gysmasaike ({3Count: [10, 15],//mosaic level number, vertical direction number, the number can not be too high, otherwise the calculation is too large, the computer can not execute, causing the browser to die4Ani:4,//The animation effect. 1. The mosaic gathers in the middle, 2. The top left corner of the mosaic gathers, 3. Mosaic pulls disappear, 4. Shrinking in situ5delay:5000,//Animation Execution Time6URL: "1.jpg"//Picture Path7               });8});