使用说明

步骤一:html

创建运用背景图片的元素

								
								

步骤二:css

    1.  该元素设为相对定位,便于分割后的子元素进行定位。

    2.  宽高设为与被分割的图片一致,可确保精准分割。

								#fragment_title{
									/*必须设为relative*/
									position: relative;	
									/*宽高与被分割的背景图片一致*/
									width: 424px;
									height:150px;
								}
								

步骤三:javascript

    1.  通过jquery实现,需要导入所需文件。

								
								
								
								
								

    2.  对元素运用插件,参数设置除了图片目录都有默认值。

								/*对背景元素使用插件方法*/
							    $("#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(即无渐变)
								    });
								

      快速配置如下。

								/*快速配置*/
							    $("#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)

运动时间的可能的最大值

初始透明度

元素运动时的起始透明度

结束透明度

元素运动完成后的透明度

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
来源:站长素材