经过4个月的努力学习，迎来了进入市场的最后一个学习项目。自己模仿了一个图片展示效果，用在了项目中，感觉挺炫的。在这里分享一下，希望大家喜欢~！
小的还是先上图~
1.下图是动作开始的图片，小方块从各个位置飞来，组合在一起；
2.下图是小方块组合成的图片；
3.下图是点击图片，小方块散开飞走的效果；
刚开始想着做这个效果是因为在北京智能社的主页上看见了这个幻灯片切换效果，当时我对前端，程序员都还没有一点概念。
现在自己进入了这个行业，并且已经全日制的学习了4个月时间，所以就试着实现了下这个效果。当然，智能社主页上的要比小弟这个高端不少。
下面，我阐述下我这个效果的思路：
1.既然整个图片容器是由很多小方块组成的，那么容器的宽度，就得是一行小方块加起来的宽度，而高度就是一列小方块的高度和；
2.给每一个小方块设置背景图片，注意：每个小方块的背景图片，都是一张完整的背景图片，即最后拼成的那张图片；
3.通过双重for循环，控制每一个方块的初始位置（为了让小方块均匀的分配到4个象限中，我用了4个if判断，代码显得有些冗余），之后它们会从初始位置飞入容器，拼在一起；
4.在没有设置background-position时，小方块中的图片显示的是一样的，都是图片左上角。要让每个小方块的显示出来的图片拼起来正好是完整的图片，就需要根据这是第X行，第Y个小方块来设置它的background-position，即第X行，第Y个小方块的background-position值应该为：squareWidth*(Y-1)px squareHeight*(X-1)px，如果从循环中的 i , j 参数来看，正好对应！
5.触发组合事件后，让这些小方块飞过来，根据 i,j 的值飞到各自在图片中的位置，这个位置是按顺序的，所以也很好实现。
6.散开解体就是反过来就行啦~
好了，下面我贴出我自己的代码，嘿嘿，虽然代码很初级，可能看上去很低端，不过自己完成了一些喜欢的特效，并且同学们也很喜欢，还是感觉非常开心的。
最后几天了，加油~Day day up!!!
下面是html代码：
下面是CSS代码：
这里是js代码：
最后这段隐藏容器的时候，如果直接用JQ中的hide立即执行的话，解体的动画来来不及播放就display:none生效了。
所以我选择了使用setTimeout让 hide() 函数延迟到散开解体动画执行完毕之后再执行。
这样既有了动画，也将这些方块抽离了文档流，用于图片展示的时候，解体图片后不至于挡住下层的内容。
好了，我的这个小效果就在这里了~谢谢各位，也谢谢在4个月的学习中陪着我，一起成长起来的小伙伴~看来以后我们得一起坑代码了！加油！