css:
.kk{
width:100px;
height:100px;
display:inline-block;
color:red;
text-align:center;
position: relative;
font-weight: bold;
line-height:100px;
background:url(./pic.png);
background-size: 100%;
line-height: 79px;
font-weight:bold;
font-size:18px;
}
.anmintate{
animation: animated_div 1s infinite;
-moz-animation: animated_div 1s infinite;
-webkit-animation: animated_div 1s infinite;
-o-animation: animated_div 1s infinite;
}
@-webkit-keyframes animated_div
{
0%{top:0;}
100%{top:50px;}
}
html:
<div class="kk anmintate">
6454
</div>
Js:
$(function(){
numAc('.kk','200','56','50') ;
})
// doc 对象
// time 起始
// seep 每次增加
// index 时间
function numAc(doc,time,seep,index){
obj_text = parseInt($(doc).text());
obj = $(doc);
times = parseInt(time);
var time = setInterval(function(){
times = times+=parseInt(seep);
obj.html(times);
if(times >= obj_text){
clearInterval(time);
obj.removeClass('anmintate');
return false;
}
},index);
}
改进后:
$(function(){
numAc('.kk','200','56','50','') ;
})
// doc 对象
// time 起始
// seep 每次增加
// index 时间
// num 最终数字 (可选项) 如果为空,会获取对象的INNerhtml
function numAc(doc,time,seep,index,num){
if(num){
obj_text = num ;
}else{
obj_text = parseInt($(doc).text());
}
obj = $(doc);
times = parseInt(time);
var time = setInterval(function(){
times = times+=parseInt(seep);
obj.html(times);
if(times >= obj_text){
clearInterval(time);
obj.removeClass('anmintate');
return false;
}
},index);
}