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

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

39398 300 查看评论 (38)

分享到微信朋友圈

查看演示立即下载

插件描述：纯JS数字滚动效果，兼容IE9+、但不兼容水晶字体，需要谷歌浏览器支持

更新时间：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) // 执行数字滚动动画  
};

jQuery图片放大预览

jquery 弹框+模态框+消息提示（原创）