html js 数字翻页效果,纯JS数字滚动效果(原创)

37362135cb305b4631dac39ec9ed6434.png

5b4b944461607cc871b1911f9854541f.png

插件描述:纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持

更新时间:2019/6/24 上午9:47:04

更新说明:【修复bug】不能设置整数// 代码已经封装好了,如有疑问请联系本人632922356@qq.com

var dom = document.querySelector(".number")

var digit = new Digit({

number : 1234582.52, // 到达指定数值停止滚动

finish : 5, // 整体完成时间

speed : 1, // 数值越大,越多数字同时进行翻滚,取值范围(1 ~ 10)

direction : "right", // 动画方向

dom : dom, // 在指定dom节点插入动画

})

digit.render() // 执行// 展示部分源码

/**

* 数字动画执行

* @func render

* @param {Number} number 到达指定数值停止滚动

* @param {int} finish 动画执行完毕时间

* @param {int} speed 数值越大,越多数字同时进行翻滚,取值范围(0 ~ 10)

* @param {String} direction 动画方向

* @param {Object} dom 在指定dom节点插入动画

*/

Digit.prototype.render = function() {

var direction = data.direction // 动画方向

var finish = data.finish // 总完成时间

var speed = data.speed // 数值越大,越多数字同时进行翻滚,取值范围(0 ~ 10)

var number = (data.number.toString()).replace('.', '').length - 1 // 需要执行动画的数量

var single = Number((finish / number).toFixed(2)) // 单个完成时间

var animation = {

number: number,

single: single,

speed: speed,

timerTemp: 0 // 定时器临时记录时间

}

animation.timerTemp -= animation.single initDom(data.dom, data.number, animation) // 加载dom节点

initAnimation(data.dom, animation, direction) // 执行数字滚动动画

};