您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页js实现数字递增特效实例代码

js实现数字递增特效实例代码

来源:化拓教育网
 本篇文章主要介绍了js实现仿支付宝我的财富里的数字递增特效,具有很好的参考价值。下面跟着小编一起来看下吧

上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。

上面就是这个插件的效果,我们来看一下怎么使用的吧

第一: HTML部分这里简单列举一个

 <p class="counter col_fourth">
 <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
 <p class="count-text ">小月博客</p>
 </p>

上面我们来了解两个关键的东西:

  • data-to 这个属性控制你最终要递增的数值是多少

  • data-speed 这个看英文的意思就很清楚了就是表示数据递增的速度了

  • ps: 这里的class和id 根据大家各自的修改去调整就好了,

    第二:JS部分也是插件的核心代码

                    
                
                

    Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务