纯JS数字滚动效果(原创)

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

 35349  292  查看评论 (38)
分享到微信朋友圈
X
纯JS数字滚动效果(原创) ie兼容12

更新时间:2019/6/24 上午9:47:04

更新说明:【修复bug】不能设置整数

// 代码已经封装好了,如有疑问请联系本人632922356@qq.com
var dom = document.querySelector(".number")
var digit = new Digit({
   number : 1234582.52, // 到达指定数值停止滚动
   finish : 5, // 整体完成时间
   speed : 1, // 数值越大,越多数字同时进行翻滚,取值范围(1 ~ 10)
   direction : "right", // 动画方向
   dom : dom, // 在指定dom节点插入动画
})
digit.render() // 执行
// 展示部分源码
/**     
 * 数字动画执行    
 * @func render     
 * @param {Number} number 到达指定数值停止滚动    
 * @param {int} finish 动画执行完毕时间    
 * @param {int} speed 数值越大,越多数字同时进行翻滚,取值范围(0 ~ 10)     
 * @param {String} direction 动画方向    
 * @param {Object} dom 在指定dom节点插入动画    
 */
Digit.prototype.render = function() {
    var direction = data.direction // 动画方向       
    var finish = data.finish // 总完成时间      
    var speed = data.speed // 数值越大,越多数字同时进行翻滚,取值范围(0 ~ 10)       
    var number = (data.number.toString()).replace('.', '').length - 1 // 需要执行动画的数量        
    var single = Number((finish / number).toFixed(2)) // 单个完成时间       
    var animation = {
        number: number,
        single: single,
        speed: speed,
        timerTemp: 0 // 定时器临时记录时间      
    }
    animation.timerTemp -= animation.single initDom(data.dom, data.number, animation) // 加载dom节点      
    initAnimation(data.dom, animation, direction) // 执行数字滚动动画  
};
相关插件-动画效果

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 33684  311

jQuery+three.js雪花飘落动画效果

这是一款给人3D立体空间感的jQuery+three.js雪花飘落动画效果,canvas绘制雪花下雪动画特效。
  动画效果
 36031  423

HTML5+CSS3音量调节旋转按钮

可以拨动让物体旋转,很不错
  动画效果
 38446  374

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果,一共有六种模式。
  动画效果
 29063  405

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

    goodbabyand21 0
    2021/3/25 15:30:06

    可看下这个,

    https://www.jq22.com/jquery-info23738

     可以修改样式

    回复
    欣の幻想 0
    2021/1/26 17:29:01
    请问大佬,您这个效果好像只能new一个,如果new多个的话好像只能显示new的最后一个 回复
    默问 0
    2021/1/12 16:46:15
    大佬还在么,求一份源码,能整数的。1806224470@qq.com
    回复
    zhang1832870214 0
    2020/9/8 10:40:21
    求源码 谢谢 1832870214@qq.com 回复
    -Rolling Veau 0
    2020/7/1 8:55:17
    能发我一份源码吗?谢谢大佬651423057@qq.com
        HN0
        2020/7/2 17:45:04
        已发
    回复
    井冈山的大雪 0
    2020/4/19 17:25:14
    能发我一份源码吗?谢谢大佬1993827897@qq.com
        HN0
        2020/5/9 17:24:07
        已发
    回复
    下雪天 0
    2020/1/15 16:41:20
    发我一份源码大佬 谢谢 646592353@qq.com
        HN0
        2020/1/15 16:48:53
        已发
    回复
    ╇ミ???-? 0
    2019/12/30 15:15:56
    大佬求发 谢谢2393157878@qq.com 感谢
        HN0
        2020/1/15 16:48:02
        已发
    回复
    ?・逸 0
    2019/11/22 14:19:26
    请问样式可以自己修改吗?求源码493524464@qq.com
        HN0
        2019/12/23 17:30:27
        可以的
    回复
    ?・逸 0
    2019/11/22 14:18:48
    请问样式可以自己修改吗?求源码493524464@qq.com
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复