你的位置:首页 > Java教程

[Java教程]基于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