js+css3 动画数字累加

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 动画数字累加的更多相关文章
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- 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 首 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- CSS3动画与JS动画的优缺点?
JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
随机推荐
- [YUM]Public key for *.rpm is not installed
解决办法: 此时要导入rpm的签名信息即可 以root登录,执行下面命令 # rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-redhat-release
- openstack grizzly版network网络节点安装
版本以及源的配置和控制节点一致 1.安装完操作系统已经apt源配置完成之后,一定要执行 apt-get update root@cloud:~# mv /etc/apt/sources.list /e ...
- 短随机唯一id生成参考
<?php function getRandOnlyId() { //新时间截定义,基于世界未日2012-12-21的时间戳. $endtime=1356019200;//2012-12-21时 ...
- Nodejs负载均衡:haproxy,slb以及node-slb - i5ting的个人空间 - 开源中国社区
Nodejs负载均衡:haproxy,slb以及node-slb - i5ting的个人空间 - 开源中国社区 undefined
- Telecasting station - SGU 114(带劝中位数)
题目大意:在一个数轴上有N个点,每个点都有一个权值,在这个数轴上找一个点,是的每个点到这个点的距离之和乘上权值的总和最小. 分析:以前也遇到过类似的问题,不过并不知道这是带权值的中位数问题,百度百科有 ...
- C程序中唯一序列号的生成
在实际的软件开发项目中.常常会涉及唯一序列号的生成.本文以一个实际的程序为例,介绍了唯一序列号的生成过程. 本文生成的序列号的样式为:MMDDHHMINSS_XXXXXX. 程序例如以下: /**** ...
- iozone文件系统测试 与EXCEL 制图
http://www.iozone.org/[root@monitor bin]# ./iozone -a -s 512m -f /usr/test -y -q -Rb /root. -i -i Io ...
- SDL Game Development InputHandler类的一处bug
个人十分推荐SDL Game Development 这本书,它并不是死抠SDL的api,而是一步步带着我们如何对一个游戏进行构架. 虽然我没用过游戏引擎,也基本不会写游戏,但是我认为这本书本身就是在 ...
- colspan是跨列,rowspan是跨行
colspan是跨列,rowspan是跨行,可以看作是网页设计表格中的列和行的一个属性.跨列相当于把两列或者多列合并成一个单元格:跨行同理是把两行或者多行合并成一行:colspan和rowspan分别 ...
- MyTask1
从去年10月份开始着手的一个小项目,啊喂~人家更笨就没学过.net好不,都是现学现卖的丫~~~23333,好了好了,下面进入正题: 陆陆续续做了很长时间(其实也就是这两天兴趣说来就来,许久没码代码手痒 ...