jQuery炫酷图片碎片拼图动画特效插件

当前位置:主页 > jQuery库 > 图片效果 > jQuery炫酷图片碎片拼图动画特效插件
jQuery炫酷图片碎片拼图动画特效插件
分享:

    插件介绍

    jquery-animations-tile是一款效果非常炫酷的图片碎片拼图动画特效jQuery插件。它默认提供了图片碎片组合特效,百叶窗特效,波浪特效,拼图动画特效等效果。另外它还提供了很多参数来设置各种不同的拼图动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-06
    阅读:
简要教程

jquery-animations-tile是一款效果非常炫酷的图片碎片拼图动画特效jQuery插件。它默认提供了图片碎片组合特效,百叶窗特效,波浪特效,拼图动画特效等效果。另外它还提供了很多参数来设置各种不同的拼图动画效果。

安装

使用该图片碎片拼图插件需要引入相关的js和CSS文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.animations.min.js"></script>
<script src="js/jquery.animations-tile.js"></script>              
              

使用方法

HTML结构

可以在任何的图片元素上使用该插件。

<div id="container">
  <img id="image" src="images/batman.png" />
</div>
              
初始化插件

以第一种碎片组合效果为例,在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该时间轴插件。

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2
});           
              

如果需要带一些效果,可以传入一些参数:

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  effect: [
    'flyToUp', // for even tile
    'flyToDown fadeOut' // for odd tile
  ]
});               
              

图片效果也可以是函数的形式:

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  effect: function(options, row, col) {
    if(row == col)
      return 'flyToUp';
    else
      return 'flyToDown';
  }
});                
              

你还可以使用sequence来制作动画序列:

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  sequence: [
    [
      [0, 0]  // tile
    ], // group, all tiles have same animation in the same group
    [[1, 1]], 
    [[0, 1]], 
    [[1, 0]]
  ]
});                
              

配置参数

  • rows:类型:Number,默认值:1。设置图片碎片的行数。
  • cols:类型:Number,默认值:1。设置图片碎片的列数。
  • effect:类型:StringArrayFunction。默认值:flyOut。设置碎片动画的类型,如果是多个值则交换执行。你也可以使用一个函数来计算使用哪个效果。例如下面的样子:
    function func(options, row, col)
    {
      return 'effect';
    }
    
  • sequent:类型:Boolean。默认值:true。设置是否图片碎片动画使用不同的延迟时间。
  • sequence:类型:StringArray。默认值:"random"。设置图片碎片动画的序列或自定义的动画顺序。可以的方法有:
    • random:随机碎片。
    • randomCols:随机行数。
    • randomRows:随机列数。
    • lr:从左到右。
    • rl:从右到左。
    • tb:从上到下。
    • bt:从下到上。
    • lrtb:从左到右再从上到下。
    • rlbt:从右到左再从下到上。
    • rltb:从右到左在从上到下。
    • lrbt:从左到右再从下到上。
    • tblr:从上到下再从左到右。
    • btrl:从下到上再从右到左。
    • tblr:从上到下再从左到右。
    • tbrl:从上到下再从右到左。
    • btlr:从下到上再从左到右。
  • groups:类型:Number,默认值:1。设置不同的图片碎片动画组。
  • adjustDuration:类型:Boolean,默认值:true。设置图片碎片动画使用不同的持续时间。