jQuery数字滚动动画插件

所属分类:其他-动画效果

 29923  353  查看评论 (13)
分享到微信朋友圈
X
jQuery数字滚动动画插件 ie兼容8

更新时间:2019-09-18 01:22:55

更新说明:增加reload事件 以及 text 设置

$('.number').leoTextAnimate('reload', {
    text: '123,456',
    delay: 1000,
    autorun: true,
    fixed: [',', ':', '.'],
    start: '-'
})

reload配合text可实现重新赋值,并重新滚动


兼容所有样式,不受样式限制,数字从下往上滚动。

使用方法

引用文件

<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<script src="jquery.leoTextAnimate.js"></script>

html

<div class="number">6,789.00</div>

js

$('.number').leoTextAnimate({
    delay: 1000, //延时出现时间
    autorun: true, //是否自动运行
    fixed: [',', ':', '.'], //
    start: '-'
});
相关插件-动画效果

可自定义形状文字的烟花(原创)

canvas仿烟花效果,代码注释全
  动画效果
 53964  444

canvas管道流动动画

canvas小动画插件,代码注释全
  动画效果
 38993  331

css动画库Mimic.css

Mimic.css是一个css动画库,可以通过简单的调用,得到您想要的动画效果
  动画效果
 31762  383

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 53039  486

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    朱文兵 0
    2024/3/1 11:19:41
    你好,怎么改成该数字在可视区域的时候再执行数字滚动效果? 回复
    yuiop123 0
    2019/10/31 11:46:17
    text里面的数字可以动态改变吗,text: this.number ,数字就不显示了,text规定必须是个字符串? 回复
    阿汤 0
    2019/8/1 19:30:41
    如何控制小数点位数
        BattleofLexington0
        2019/8/1 20:19:13
        额,为什么会有这样的问题,你给的值是什么样的,他就显示成什么样。小数点还不是你给的值所决定的。
        阿汤0
        2019/8/1 21:06:07
        就是数据超过七位,比如八位数,第八位不显示了
        Satan.0
        2019/8/2 11:20:05
        那是你样式控制了宽度吧?几百年前做的插件了,自己都忘了,没收费,没加密,你可以看源码呀,我这边按默认样式测试没有任何问题,别说七八位,十几位都一样显示啊
        西瓜0
        2019/8/2 11:26:18
        控制位数,应该是你先处理好你所想要的数值后,在调用插件,这个插件只负责数字滚动效果。你的现在的需求和插件没有关系的。
    回复
    grotesque・ 0
    2019/6/26 16:08:15
    不能替换数字 有毛用啊
        西瓜0
        2019/6/26 16:57:08
        可以替换数字的,<div class="number">6,789.00</div>这里的数字,随你改变。
    回复
    亦・凌乱? 0
    2019/6/16 11:15:09
    你好,怎么动态替换 数字 然后重新再滚动
        Satan.0
        2019/6/16 15:39:19
        没做这个API,你自己二次改吧,几年前做的东西了
        草原野狼1
        2019/7/15 15:28:50

        正好用到,非常棒的插件,感谢感谢!!!
        虽然

        var plugin = $._data(this, "leoTextAnimate");

        这部分不懂,但还是研究出了动态替换数字的,
        1:注释  //this.string = $(eles).html();
        2://var html = method.getHtml(this.options, this.string);:  更改成  this.string = this.element.html();就好

        ☆开始,两个人生活☆0
        2019/8/13 22:06:03
        更改了,数字不会翻滚了但是回变
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复