素材牛

好用的数字滚动效果插件

 所属分类:网页特效-滚动/拖拽

 浏览:264次-  下载:1次-  评论:3次-  发布时间:2019-04-11
好用的数字滚动效果插件兼容IE10
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
项目地址(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

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

旅行的石头
2019年05月24日

搞一个试试

回复
zjqstar
2019年06月29日

效果挺好的

回复
古墨风波梦一场
2019年07月07日

效果挺好的

回复
kaixin588
2019年07月16日

效果挺好的,效果挺好的

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

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证