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

js+css3 动画数字累加的更多相关文章

  1. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  5. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  6. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  7. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  8. CSS3动画与JS动画的优缺点?

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

  9. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

随机推荐

  1. TC358746AXBG/748XBG 桥接器说明

    为什么需要这个mipi csi-2 bridge 芯片,由于我们用的sensor 芯片是美光的MT9m021,这颗芯片并不支持MIPI 下面是网上摘录的说明可能解释这个问题: Because of t ...

  2. [转载]opencv MSER

    最大稳定极值区域(MSER-Maximally Stable Extremal Regions)可以用于图像的斑点区域检测.该算法最早是由Matas等人于2002年提出,它是基于分水岭的概念. MSE ...

  3. [置顶] MyEclipse下安装插件方法(properties文件编辑器Propedit为例)

    网上流传了很多安装插件的方法.在这里我只讲解一种方法. 因为我认为这种方法有以下两个优点:第一.简单,方便安装:第二.对于自己安装的插件易于管理. 我的myeclipse版本号为10.5,操作系统为w ...

  4. Call-time pass-by-reference has been deprecated

    Warning: Call-time pass-by-reference has been deprecated解决方法 第一种方法: 修改php.ini就可以了. 1. 在PHP.ini中搜索关键字 ...

  5. 查看线程linux cpu使用率

    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算 转 http://www.cnblogs.com/lidabo/p/4738113.html目录(?)[-] proc文件系统 p ...

  6. Away3D 的实体收集器流程2

    带着上次的疑问我们继续探讨Away3D 的渲染流程. 在Away3D中所有的显示对象都是继承Object3D 的我们先看看显示对象和继承关系. Object3D |---ObjectContainer ...

  7. [CodeForce]356D Bags and Coins

    已知有n个包,和总共s个钱币. n,s<=70000. 每个包可以装钱币,还可以套别的包.每个包中的钱数等于 所有套的包的钱数 加上 自己装的钱. 所有的钱都在包内. 问给定每个包中的钱数,输出 ...

  8. Java基础知识强化之集合框架笔记29:使用LinkedList实现栈数据结构的集合代码(面试题)

    1. 请用LinkedList模拟栈数据结构的集合,并测试:  题目的意思是:     你自己的定义一个集合类,在这个集合类内部可以使用LinkedList模拟,使用LinkedList功能方法封装成 ...

  9. listview的动态加载数据问题

    1:调用adapter.notifyDataSetChanged()却不起作用 原因可能有一下几点 1.数据源没有更新,调用notifyDataSetChanged无效. 2.数据源更新了,但是它指向 ...

  10. IsPostBack and DropdownList.

    Encounted the issue accident when helping my classmate dealing with his homework assignment,it turns ...