非常牛叉的图片切换特效，当你点击切换按钮的时候就会发现图片破碎切换。
还是来看强悍的demo：http://www.36ria.com/demo/jfancytile/demo/index.html
这个demo有些诡异，有时候图片会变得很少。
点此下载效果很强大，不过请慎用，非常占CPU。
这个效果的原理并不复杂，来看下面的图解：
在点击切换按钮的瞬间，生成覆盖整张图片的特定方格大小的绝对定位层，层的背景都是为这张图片，这时候要计算每个方格的背景图片位置，以及绝对定位层的位置，生成好后，开始移动绝对定位层，然后隐藏和删除这些层。
使用教程：
创建如下html代码：
- <div id="selector">
- <ul>
- <li><img src="images/img01.jpg" alt="Title 01" /></li>
- <li><img src="images/img02.jpg" alt="Title 02" /></li>
- </ul>
- </div>
引入插件：
- <head>
- <link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
- <script type="text/javascript" src="js/jquery.jfancytile.js"></script>
- </head>
初始化插件：
- $("#selector").jfancytile();
来看下它的参数配置：
- $("#selector").jfancytile({
- inEasing: "swing", //Easing动画插件的效果（向里）
- outEasing: "swing", // Easing动画插件的效果（向外）
- inSpeed: 1000, // 动画速度（向里）
- outSpeed: 1000, // 动画速度（向外）
- rowCount: 8, // 每一行的碎片数
- columnCount: 13 // 总列数
- });
