使用说明
步骤一：html
创建运用背景图片的元素
1 | <!-- 对fragment_title使用fragmenFly插件 --> |
2 | <div id="fragment_title"> |
3 |
4 | </div> |
步骤二：css
1. 该元素设为相对定位，便于分割后的子元素进行定位。
2. 宽高设为与被分割的图片一致，可确保精准分割。
1 | #fragment_title{ |
2 | /*必须设为relative*/ |
3 | position: relative; |
4 | /*宽高与被分割的背景图片一致*/ |
5 | width: 424px; |
6 | height:150px; |
7 | } |
步骤三：javascript
1. 通过jquery实现，需要导入所需文件。
1 | <!-- 导入jquery或有jquery环境 --> |
2 | <script src="../libs/jquery.js" type="text/javascript"></script> |
3 | <!-- 导入插件 --> |
4 | <script src="../jquery.fragmentFly.js" type="text/javascript"></script> |
2. 对元素运用插件，参数设置除了图片目录都有默认值。
01 | /*对背景元素使用插件方法*/ |
02 | $("#fragment_title").fragmentFly({ |
03 | image_url:"./img/title.png", //背景图路径，当前目录为元素所在的html目录 |
04 | cut_dir:"x", //可选"x"或"y"，默认均分x方向 |
05 | ave_part:12, //均分cut_dir方向，默认切割成12份 |
06 | rm_part:[2,3] //非cut_dir方向上随机切割，默认最小2份，最多3份 |
07 | },{ |
08 | anime_dir:"down", //切割子元素动画运行方向，可选"up","down","left","right"，默认为down |
09 | path:[500,800], //切割子元素动画路长，默认路径最短500px，最长800px |
10 | time:[1000,1300], //切割子元素动画时长，默认时长最短1000ms，最长1300ms |
11 | opacity:[1,1] //切割子元素透明度变化，默认初始为1，结束为1(即无渐变) |
12 | }); |
快速配置如下。
1 | /*快速配置*/ |
2 | $("#fragment_title").fragmentFly({image_url:"./img/title.png"},{}); |
配置说明
切割方向cut_dir
接受参数:"x"或"y"
为了模拟出碎片的随机效果，先选择一个方向均匀分割，另一个方向则可以赋给随机值，随机分割。
均分值ave_part
接受参数:整数值，如4
均分cut_dir方向
随机分割值rm_part
接受参数:长度为2的整数数组，如[3,8]
非均分方向上，随机分割。参数是分割份数的取值区间。
动画模拟
|
|
||
|
|
|
|
|
|
||
|
最短路径(px) |
运动路径的可能的最小值 |
|
|
最长路径(px) |
运动路径的可能的最大值 |
|
|
最短时间(ms) |
运动时间的可能的最小值 |
|
|
最长时间(ms) |
运动时间的可能的最大值 |
|
|
初始透明度 |
元素运动时的起始透明度 |
|
|
结束透明度 |
元素运动完成后的透明度 |