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

星期二, 2023-04-18 | Author: Lee | computer, 前端 | 834 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:

文章作者: Lee

本文地址: https://www.pomelolee.com/2383.html

除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址

No comments yet.

Leave a comment

Search

文章分类

Links

Meta