博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js+css3 动画数字累加
阅读量:6344 次
发布时间:2019-06-22

本文共 2107 字,大约阅读时间需要 7 分钟。

 

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

 

转载于:https://www.cnblogs.com/xinlinux/p/4465307.html

你可能感兴趣的文章
C# Lambda表达式
查看>>
Spring 教程(三) 环境设置
查看>>
指针简单用法
查看>>
求整数数列螺旋存储中任意数到数据1的曼哈顿距离 spiral_memory
查看>>
550.键盘行
查看>>
69.资金管理-税率表管理extjs 页面
查看>>
如何在office2010中的EXCEL表格使用求和公式
查看>>
在div中设置文字与内部div垂直居中
查看>>
CentOS查看系统信息-CentOS查看命令
查看>>
Oracle 客户端安装
查看>>
洛谷 P1744(迪杰斯特拉)
查看>>
win7 配置IIS + php 环境
查看>>
[UML]UML系列——用例图中的各种关系(include、extend)
查看>>
若要调试此模块,请将其项目生成配置更改为“调试”模式。若要取消显示此消息,请禁用“启动时若没有用户代码则发出警告”调试器选项。...
查看>>
08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS
查看>>
java_socket套接字网络编程_实现多线程聊天
查看>>
SpringMVC + Spring + MyBatis 学习笔记:在类和方法上都使用RequestMapping如何访问
查看>>
[转载]使用RoboCopy 命令
查看>>
清楚浮动的应用
查看>>
spring cloud学习(五) 配置中心
查看>>