Pomelo Lee workspace

JS Code block 代码块–动态数字插件 scrollNum

星期二, 2023-04-18 | Author: LeecloseAuthor: Lee Name: lee
Email: [email protected]
Site: https://www.pomelolee.com/
About: webgame网页,手机游戏服务端架构和开发者See Authors Posts (492) | computer, 前端 | 1,041 views

动态数字插件 scrollNum
插件介绍
动态数字插件可以实现在一个dom容器内播放数字动画，数字动画分为两种，一种是区间变化，动画效果类似于数值从一个起始数值不断更新显示至终止值；还用一种是区间滚动，动画效果类似于老虎机。
区间滚动
区间变化

插件js地址
//lib.eqh5.com/@eqxiu/eqxH5DyNum/1.0.0/EqxH5DyNum.js
//lib.eqh5.com/@eqxiu/eqxH5DyNum/1.0.0/EqxH5DyNum.min.js
建议将js文件放入项目本地使用

插件使用方法
引入动态数字插件的js文件后，new EqxH5DyNum后创建一个实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const dy = new EqxH5DyNum({
    startNum: 0,
    endNum: 100,
    animDuration: 2,
    isShowThousandSeparator: false,
    endOrder: 'left',
    isEndRandom: false,
    $ele: $('.container')
});
 
// 播放区间变化动画
dy.numChange().then(() => {
    // 区间变化动画播放完执行
})
 
// 播放区间滚动动画
dy.numScroll().then(() => {
    // 区间滚动动画播放完执行
})
 
// 更新部分或全部实例参数,并播放区间变化动画
dy.update({
    startNum: 100,
    endNum: 0,
    animDuration: 5,
}).numChange()

startNum 数字动画开始播放的起始值,number类型,不传默认0;
endNum 数字动画结束的终止值,number类型,不传默认100;
animDuration 数字动画播放持续的动画时长,number类型,单位s,不传默认2s;
isShowThousandSeparator 播放数字动画时，数值是否展示千分位,,boolean类型,true为展示千分位,false为不展示千分位,不传默认false;
endOrder 播放数字动画的区间滚动时,终止值停止的先后顺序,string类型,’left’或’right’或’same’,’left’表示终止值从高位至低位依次停止,’right’表示终止值从低位至高位依次停止,’same’表示终止值的各位数字同时滚动同时停止。不传默认’left’;
isEndRandom 播放数字动画的区间滚动时,是否随机选择起始值与终止值之间(包括起始值和终止值)的数值作为终止值,boolean类型,true为随机选择,false为不选择,不传默认false;
$ele 用于展示数字动画的dom容器,jquery元素, 必须传。
实例创建完成后，调用dy.numChange()播放动态数字的区间变化动画，dy.numChange()会返回promise对象，在区间变化的动画播放完之后，promise对象变成resolve状态。 同样地，调用dy.numScroll()播放动态数字的区间滚动动画，dy.numScroll()也会返回promise对象，在区间滚动的动画播放完之后，promise对象变成resolve状态。 另外，一个实例创建完后，可交替调用dy.numChange()、dy.numScroll()以播放不同的动画，也可以重复调用这两种方法，以重新播放动画。 调用dy.update({// 新参数})更新部分或全部实例参数，实例更新后，可调用dy.numChange()、dy.numScroll()播放动画，也可以直接链式调用，dy.update({// 新参数}).numChange()、dy.update({// 新参数}).numScroll()播放实例更新后的动画。

注意：

EqxH5DyNum插件依赖于JQuery，使用该插件前，请先引用JQuery；
$ele 是用于展示数字动画的dom容器,它要求是一个jquery元素, 必须传。另外，播放区间滚动动画时，默认会在$ele元素内居中播放，因此，若要调用dy.numScroll()，需要$ele元素css上有高度，并提供绝对定位基准；
endOrder, isEndRandom这两个参数在播放区间滚动时才生效，也就是说，调用dy.numChange()播放区间变化动画时不会用到这两个参数。

~谢谢打赏~

赏

Tags: js

No comments yet.

Leave a comment