js+css3 动画数字累加

最新推荐文章于 2025-04-28 10:25:04 发布

weixin_33743248

最新推荐文章于 2025-04-28 10:25:04 发布

阅读量757

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinlinux/p/4465307.html

本文介绍了如何通过CSS动画和JS数值渐变配合使用，实现文本在页面上沿指定方向位移的效果。通过定义CSS类和动画属性，以及使用JavaScript动态更新元素的内容和样式，使得文本在指定时间内平滑地移动到预设位置。此方法不仅增强了网页的互动性和视觉吸引力，还展示了HTML、CSS和JavaScript在网页动态效果实现中的协同作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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