揭示人物——jQuery Digitalwrite 5 x5矩阵

  • 源码大小:15.37KB
  • 所需积分:1积分
  • 源码编号:19JP-3053
  • 浏览次数:749次
  • 最后更新:2023年04月30日
  • 所属栏目:文本
本站默认解压密码:19jp.com 或 19jp_com

简介

Digitalwrite是一个奇特的jQuery文本动画插件,通过在5x5矩阵中逐步显示字符来创建动画数字效果。

如何使用它:

1.将缩小版的Digitalwrite插件添加到页面中。

<script src="/path/to/cdn/jquery.min.js"></script>&#13;
<script src="/path/to/jquery.digitalwrite.min.js"></script>&#13;

2.调用函数并指定要设置动画的角色。

<span id="example"></span>&#13;
$("#example").digitalwrite({&#13;
  char: 'J',&#13;
});&#13;

3.设置字符的高度/宽度。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  height: 20, &#13;
  width: 20,&#13;
});&#13;

4.设置角色的背景。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  background: 'rgba(0, 0, 0, .1)',&#13;
});&#13;

5.自定义角色的边框。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  border: '1px solid red',&#13;
});&#13;

6.更改动画类型:无、运动或收缩。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  animation: 'spiral',&#13;
});&#13;

7.更改动画类型:无、运动或收缩。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  animation: 'spiral',&#13;
});&#13;

8.覆盖默认动画速度。默认值:500。

$("#example").digitalwrite({&#13;
  char: 'J',&#13;
  timeout: 1000,&#13;
});&#13;

9.动画完成后执行一个功能。

$("#example").digitalwrite({&#13;
  success: function() {&#13;
    // do something&#13;
  }&#13;
});&#13;

10.将角色转换为另一个角色。

$("#example").transformTo('K', function() {&#13;
  console.info('successfully transformed to K');  &#13;
});&#13;