其他代码
number-flip - 数字翻转切换插件
PetitQ
number-flip 是一款 js 数字翻转切换插件。该 js 数字翻转切换插件可以制作数字切换的动画效果，你可以自定义数字类型，使用中文或 unicode，来制作类似水果机动画的效果。
HTML 结构:
使用一个[div]作为数字的容器。
也想出现在这里？联系我们吧
<div class="flip"></div>
初始化插件:
使用该插件的基本语法格式为：
var flipInstance = new Flip(options)
flipInstance.flipTo(instanceOptions)
使用下面的方法来制作数字翻转动画。
new Flip({
node: $('.flip'),
from: 9527,
to: 42
})
给数字翻转动画设置一个延迟时间。
new Flip({
node: $('.flip'),
from: 9527,
to: 42,
delay: 1 // second
})
先创建一个对象，在后面在执行数字翻转动画。
const el = new Flip({
node: $('.flip'),
from: 9527
})
el.flipTo({to: 42})
自定义动画的持续时间。
new Flip({
node: document.querySelector('.flip'),
from: 9527,
to: 42,
duration: 2 // second
})
高级用法:
new Flip({
node: document.querySelector('.flip'),
from: 73,
to: 25,
duration: 2,
delay: 1,
easeFn: function(pos) {
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
},
// for more easing function, see https://github.com/danro/easing-js/blob/master/easing.jssystemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})
配置参数:
该 js 数字翻转切换插件的可用配置参数有：
node：动画容器的选择器
from：开始动画的数值
to：结束动画的数值
duration：动画的持续时间
delay：延迟动画的时间
easeFn：动画的 easing 效果
systemArr：一个长度为 10 的数组，代表数值的内容。如果没有指定，默认为[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
direct：布尔值。代表数值动画是一次执行，还是一个接一个执行
该 js 数字翻转切换插件的 github 地址为：https://github.com/gaoryrt/number-flip
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
