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:
6454
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); }