基于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 <span class="dot">:</span><span class="ahkari"> 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> 1. 该元素设为相对定位,便于分割后的子元素进行定位。</p> <p> 2. 宽高设为与被分割的图片一致,可确保精准分割。</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> 1. 通过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> 2. 对元素运用插件,参数设置除了图片目录都有默认值。</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> 快速配置如下。</p> <div class="codeArea"> <pre class="brush: javascript;"> /*快速配置*/ $("#fragment_title").fragmentFly({image_url:"./img/title.png"},{}); </pre> </div> </div>