素材牛VIP会员

好用的数字滚动效果插件

 所属分类:网页特效-触屏/拖拽/下拉

 浏览:3059次  评论:5次  更新时间:2019-04-11
牛币素材VIP可免积分下载
好用的数字滚动效果插件兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):http://itakeo.com/blog/2017/07/10/odometer/
素材描述:简单灵活好用,不依赖其它库,js采用了ES6编写,尽量使用chrome浏览器来查看,可以使用babel转成ES5,或者通过babel的网站在线转换。动画使用css3。
 标签:数字滚动

详细介绍

以下是调用接口

var odo1 = new Odometer('.Odometer',{
    len : null, //设置默认位数
    num : "", //初始化值
    speed : 1000, //动画速度
    symbol : '', //分割符
    dot : 0 //保留几位小数点 
});
odo1.update(123)  //更新数字

以下是基本的css

.number-animate{line-height:45px; height: 45px;font-size: 40px;overflow: hidden; display: inline-block; position: relative; }
.number-animate .number-animate-dot{ width: 21px; float: left; text-align: center;}
.number-animate .number-animate-dom{ width: 27px;  text-align: center; float: left; position: relative; top: 0;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 45px;line-height: 1;}

文件目录结构

  • ┝ index.html
  • ┝ Odometer.css
  • ┝ Odometer.js

相关素材 - 触屏/拖拽/下拉

讨论这个素材(5)回答他人问题或分享使用心得会奖励牛币

旅***头  
2019年05月24日

搞一个试试

回复
zj***ar  
2019年06月29日

效果挺好的

回复
古***场  
2019年07月07日

效果挺好的

回复
ka***88  
2019年07月16日

效果挺好的,效果挺好的

回复
qq***83  
2019年08月01日

啊不错!!!!

回复
wx***82  
2020年01月06日

假如需要通过ajax请求怎么做呢

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)