首页 > 编程语言 > 详细

JavaScript 数字动态动画

时间:2020-07-24 16:30:34      阅读:72      评论:0      收藏:0      [点我收藏+]

在日常需求中会不会出现一些奇奇怪怪的需求,比如:动态数字

这里的动态数字其实是一个数字懂最小值到设定值的一个动画过程

也是基于jQuery选择器的啦,js下载地址:animationNumber.js

需要依赖几个小工具哦

JavaScript 小工具前置 js
1.计时器
2.UUID
3.原地自闭包

 

其公开两种使用方式

animationNumber(setting);
$.fn.animationNumber(command,option);

其中

setting={
  from:0,//减少的值
  to:0,//最终目标值
  speed:0,//速度
  refreshInterval:100,//计时器速度
  decimals:0,//小数点
  target:"#xxx"//选择器,
  onUpdate:null,//每次数字变更的回调事件
  onComplete:null,//完成回调事件
}
command="start|stop|reset"
option={
  from:0,//减少的值
  to:0,//最终目标值
  speed:0,//速度
  refreshInterval:100,//计时器速度
  decimals:0,//小数点
  onUpdate:null,//每次数字变更的回调事件
  onComplete:null,//完成回调事件
}
animationNumber(setting)方法下存在三个方法分别为start开始,stop停止,reset重置

  

JavaScript 数字动态动画

原文:https://www.cnblogs.com/UnknownRegister/p/13371834.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!