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

本文共 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

你可能感兴趣的文章
如何在Linux用chmod来修改所有子目录中的文件属性?
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
笔记:认识.NET平台
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
我的友情链接
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
javascript继承方式详解
查看>>
lnmp环境搭建
查看>>
自定义session扫描器精确控制session销毁时间--学习笔记
查看>>
PHP队列的实现
查看>>
单点登录加验证码例子
查看>>
[T-SQL]从变量与数据类型说起
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>
BeanUtils\DBUtils
查看>>
python模块--os模块
查看>>
Java 数组在内存中的结构
查看>>
《关爱码农成长计划》第一期报告
查看>>
学习进度表 04
查看>>
谈谈javascript中的prototype与继承
查看>>
时序约束优先级_Vivado工程经验与各种时序约束技巧分享
查看>>