Mosaic Animation Restore: Put this code in a a.html you can see the effect directly
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Linkrel= "stylesheet"type= "Text/css"href= "Css/popup.css"><title>Mosaic Animation Restore</title><style>@charset "Utf-8"; *{margin:0;padding:0;}Body{font-family:"Microsoft Jas Black";}ul Li{List-style:None;}. Clearfix{*zoom:1; }. Clearfix:before,. Clearfix:after{Display:Table;Line-height:0;content: ""; }. Clearfix:after{Clear:both; }. Popup-container{position:fixed;Z-index:9999;width:291px;Height:280px;Background-color:Rgba (0,0,0,0.85);Overflow:Hidden;}. Img-flex{position:Absolute;}. Img-flex ul{font-size:0;}. Img-flex ul Li{Display:Block;background-repeat:no-repeat;float: Left;position:relative;}</style></Head><Body><Divclass= "Popup-container"> <Divclass= "Img-flex"></Div></Div></Body><Scriptsrc= "Http://www.jq22.com/jquery/jquery-1.10.2.js"></Script><Scripttype= "Text/javascript"src= "Http://files.cnblogs.com/files/xuweiqiang/fragment.js"></Script><Scripttype= "Text/javascript">$(function() {varFragmentconfig={container:'. Img-flex',//Display ContainerLine :Ten,//How many linescolumn: -,//How many columnsWidth:291,//Displays the width of the containerAnimetime: the,//Maximum animation time, the value of the image will be value before animetime*0.33 + animetime*0.66img:'http://files.cnblogs.com/files/xuweiqiang/1231231.bmp'//Picture Path};fragmentimg (fragmentconfig);});</Script></HTML>
Like the jquery widget