关于数字加载的动画 jquery
2024-08-30 11:20:21
这是关于数字加载的一个动画,从0开始变化到设置的数字,依赖于jquery,效果如下所示
当然,数字要显示的位数是可以设置的,默认是全部位数的数字,设置显示位数可以直接传递参数,例如:
html文件为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/lib/sea.js"></script>
</head>
<body>
<h1 class="num" data-num="83692">0</h1>
<h2 class="num1" data-num="88692">0</h2>
<script type="text/javascript" src="js/entry.js"></script>
</body>
</html>
entry.js为主要js,是这个动画的方法,内容为:
function num_effect(dom,conf,fn){
if(typeof conf === 'function'){
fn = conf;
conf = {};
}
this.conf = $.extend({
digits: '', //显示的位数
time: 0.05 //动画时间,单位为s
}, conf || {});
this.fn = fn;
this.dom = $(dom);
this.val = this.dom.data("num");
this.handle();
} num_effect.prototype.handle = function(){
var self = this;
var str = self.val.toString();
var digits = parseInt(self.conf.digits);
if(isNaN(digits)){
digits = str.length;
}
var arrs = str.substr(0,digits).split("");
var j = 0, max = 0;
var setFun = setInterval(function(){
if(max >= digits){
clearInterval(setFun);
self.fn();//返回函数
}
(function(j){//更改值
var tmp = [];
for(var i=0; i<arrs.length; i++){
var now = parseInt(arrs[i]);
if(now > j){
tmp[i] = j;
}else{
if(now === j){
max ++;
}
tmp[i] = now;
}
}
self.dom.text(tmp.join(""));
})(j);
j++;
},self.conf.time*1000);
setFun;
} $.fn.extend({
numEffect: function(conf,fn){
this.each(function(i,dom){
new num_effect(dom,conf,fn);
});
}
});
那么调用这个方法实现动画只需要调用函数numEffect即可,如下
$(".num").numEffect();
如果加载完成后需要再执行一些js,那么只需如下这样即可:
$(".num,.num1").numEffect(function(){
console.log("加载完成");
});
查看entry.js可知,参数digits是控制显示的位数的,从左到右开始,time是数字变化的时间,单位为s,使用方法如下
$(".num1").numEffect({'digits': 2, 'time': 0.1});
目前,该函数只支持了这两个参数的设置,以及执行后的函数设置,没有实现按需执行动画,以后有需要了再说吧,暂时先这么做个笔记吧。
最新文章
- MySQL-procedure(loop,repeat)
- csharp: DataTable Rename ColumnName and remove Column
- hdu----(5047)Sawtooth(大数相乘+数学推导)
- javaSE27天学习目录
- MTK Android 编译命令
- .NET技术-.NET各大网站-编程技术网址
- ZOJ 3623 Battle Ships 简单DP
- cform 开发框架介绍
- <;密码的实现>;输入密码的时候,显示“*”,而不是显示输入内容
- javascript常见面试题
- Spring+SpringMVC+MyBatis深入学习及搭建(十)——MyBatis逆向工程
- JQuery Easyui引入easyui-lang-zh_CN.js后出现乱码的问题解决方法
- git-代码同步至github
- 4、CentOS6.5下安装php5.3
- 20154312 曾林 EXP9 Web安全基础
- js 去重
- BZOJ4756:[USACO]Promotion Counting(线段树合并)
- zabbix使用(自定义监控、自动报警)
- 【每日scrum】NO.9
- mysql实战优化之一:sql优化