Digitalwrite是一个奇特的jQuery文本动画插件,通过在5x5矩阵中逐步显示字符来创建动画数字效果。
1.将缩小版的Digitalwrite插件添加到页面中。
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.digitalwrite.min.js"></script>
2.调用函数并指定要设置动画的角色。
<span id="example"></span>
$("#example").digitalwrite({ char: 'J', });
3.设置字符的高度/宽度。
$("#example").digitalwrite({ char: 'J', height: 20, width: 20, });
4.设置角色的背景。
$("#example").digitalwrite({ char: 'J', background: 'rgba(0, 0, 0, .1)', });
5.自定义角色的边框。
$("#example").digitalwrite({ char: 'J', border: '1px solid red', });
6.更改动画类型:无、运动或收缩。
$("#example").digitalwrite({ char: 'J', animation: 'spiral', });
7.更改动画类型:无、运动或收缩。
$("#example").digitalwrite({ char: 'J', animation: 'spiral', });
8.覆盖默认动画速度。默认值:500。
$("#example").digitalwrite({ char: 'J', timeout: 1000, });
9.动画完成后执行一个功能。
$("#example").digitalwrite({ success: function() { // do something } });
10.将角色转换为另一个角色。
$("#example").transformTo('K', function() { console.info('successfully transformed to K'); });