基于jQuery图像碎片切换效果插件FragmentFly

基于jQuery图像碎片切换效果插件FragmentFly。这是一款只需三步轻松完成碎片动画，参数可调，使用方便。

在线预览   源码下载

部分代码：

<div class="all_wrap">
<div class="wrap_head">
<div id="fragment_title">
</div>
</div>
<div class="wrap_middle">
<div class="wrap_middle_head">
<ul class="nav_ul">
<li><a href="#">使用说明</a> </li>
<li><a href="#">配置说明</a> </li>
<li><a href="#">动画模拟</a> </li>
<li><a href="#">author&nbsp;<span class="dot">:</span><span class="ahkari">&nbsp;Ahkari</span></a>
</li>
<div class="clearFloat">
</div>
</ul>
</div>
<div class="wrap_middle_body">
<div class="warp_middle_body_wrap">
<div class="parm_info">
<div class="parm_info_title" id="useInformation">
<p>
使用说明</p>
</div>
<div class="infoArea">
<p class="heigher">
步骤一：html</p>
<p>
创建运用背景图片的元素</p>
<div class="codeArea">
<pre class="brush: html;">
                                <!-- 对fragment_title使用fragmenFly插件 -->
                                <div id="fragment_title">
                                </div>
                                </pre>
</div>
<p class="heigher">
步骤二：css</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;&nbsp;该元素设为相对定位，便于分割后的子元素进行定位。</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;&nbsp;宽高设为与被分割的图片一致，可确保精准分割。</p>
<div class="codeArea">
<pre class="brush: css;">
                                #fragment_title{
                                    /*必须设为relative*/
                                    position: relative;
                                    /*宽高与被分割的背景图片一致*/
                                    width: 424px;
                                    height:150px;
                                }
                                </pre>
</div>
<p class="heigher">
步骤三：javascript</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;&nbsp;通过jquery实现，需要导入所需文件。</p>
<div class="codeArea">
<pre class="brush: html;">
                                <!-- 导入jquery或有jquery环境 -->
                                <script src="../libs/jquery.js" type="text/javascript"></script>
                                <!-- 导入插件 -->
                                <script src="../jquery.fragmentFly.js" type="text/javascript"></script>
                                </pre>
</div>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;&nbsp;对元素运用插件，参数设置除了图片目录都有默认值。</p>
<div class="codeArea">
<pre class="brush: javascript;">
                                /*对背景元素使用插件方法*/
                                $("#fragment_title").fragmentFly({
                                        image_url:"./img/title.png",    //背景图路径，当前目录为元素所在的html目录
                                        cut_dir:"x",    //可选"x"或"y"，默认均分x方向
                                        ave_part:12,    //均分cut_dir方向，默认切割成12份
                                         rm_part:[2,3]     //非cut_dir方向上随机切割，默认最小2份，最多3份
                                    },{
                                         anime_dir:"down",    //切割子元素动画运行方向，可选"up","down","left","right"，默认为down
                                         path:[500,800],        //切割子元素动画路长，默认路径最短500px，最长800px
                                         time:[1000,1300],    //切割子元素动画时长，默认时长最短1000ms，最长1300ms
                                         opacity:[1,1]         //切割子元素透明度变化，默认初始为1，结束为1(即无渐变)
                                    });
                                </pre>
</div>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快速配置如下。</p>
<div class="codeArea">
<pre class="brush: javascript;">
                                /*快速配置*/
                                $("#fragment_title").fragmentFly({image_url:"./img/title.png"},{});
                                </pre>
</div>
</div>

via：http://www.w2bc.com/Article/32746