html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)
大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果:
整体思路:
在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下:
你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片、背景颜色
有了以上的设计流程,我们先来简单实现一下:
//CSS代码
position: relative;
display: inline-block;
width: 54px;
height: 82px;/*背景图片*/background: url(./number-bg.png) no-repeat center center;
background-size: 100% 100%;
font-size: 62px;
line-height: 82px;
text-align: center;
}
//htm代码
1
实现以上代码后,它的效果将是下面这样的:
思考:背景框中有了数字以后,我们现在来思考一下,背景框中的文字,一定是 0-9 之前的数字,要在不打乱以上 html 结构的前提下,如何让数字滚动起来呢?这个时候我们的魔爪就伸向了一个 CSS 属性: writing-mode ,下面是它属性的介绍:
horizontal-tb:默认值,表示水平排版,从上到下。
vertical-lr:表示垂直排版,从左到右。
vertical-rl:表示垂直排版,从右到左。
它的实时效果是像下面这样:
根据以上的灵感,我们可以实现下面这样的效果:
代码如下:
//html部分
0123456789
//style部分
.box-item {
display: inline-block;
width: 54px;
height: 82px;
background: url(./number-bg.png) no-repeat center center;
background-size: 100% 100%;
font-size: 62px;
line-height: 82px;
text-align: center;position: relative;
writing-mode: vertical-lr;
text-orientation: upright;/*overflow: hidden;*/}.box-item span {
position: absolute;
top: 10px;
left:50%;
transform: translateX(-50%);
letter-spacing: 10px;
}
计算滚动
如果我们想让数字滚动到 5 ,那么滚动的具体到底是多少?
答案是:向下滚动 -50%
那么其他的数字呢?
得益于我们特殊的实现方法,每一位数字的滚动距离有一个通用的公式:
transform: `translate(-50%,-${number * 10}%)
有了以上公式,我们让数字滚动到 5 ,它的效果如下:
代码加上 `transform: `translate(-50%,-${number * 10}%)`,示例如下
.box-item span {
position: absolute;
top: 10px;
left:50%;
transform: translate(-50%,-50%);
letter-spacing: 10px;
}
滚动动画的实现
在知道了每一个数字具体的滚动距离后,我们来设计一下,让数字能够随机滚动起来:
一下是让数字随机滚动的JS
setInterval(() =>{
let number= document.getElementById('Number')
let random= getRandomNumber(0,10)
number.style.transform= `translate(-50%, -${random * 10}%)`
},2000)functiongetRandomNumber (min, max) {return Math.floor(Math.random() * (max - min + 1) +min)
}
至此,我们数字滚动效果已经初步实现了,在下一节中我们将会逐步完善此效果,以满足业务需求。
完善
在上一节中,我们初步完成了滚动的效果,这一节我们将根据最开始的思维导图来设计一个通用的 Vue 业务组件
因为我们的业务需要,我们最大的位数是 8 位数字,所以对不足八位进行补位:
假如传递的位数不足 8 位,我们需要对它进行补 0 的操作,补 0 完成以后,我们也需要把它转换成金额的格式
toOrderNum(num) {
num=num.toString()//把订单数变成字符串
if (num.length < 8) {
num= '0' + num //如未满八位数,添加"0"补位
this.toOrderNum(num) //递归添加"0"补位
} else if (num.length === 8) {//订单数中加入逗号
num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)this.orderNum = num.split('') //将其便变成数据,渲染至滚动数组
} else{//订单总量数字超过八位显示异常
this.$message.warning('订单总量数字过大,显示异常,请联系客服')
}
},
渲染
我们根据上面补位字符串,分隔成字符数组,在页面中进行渲染:
computeNumber:为字符数组,例如:['0','0',',','0','0','0',',','9','1','7']
//html代码
:class="{'number-item': !isNaN(item) }"v-for="(item,index) in computeNumber":key="index"
>
0123456789
{{item}}
//CSS代码
.number-item {
width: 50px;
background: url(./number-bg.png) no-repeat center center;
background-size:100% 100%;& >span {
position: relative;
display: inline-block;
margin-right: 10px;
width:100%;
height:100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;& >i {
position: absolute;
top:0;
left:50%;
transform: translate(-50%,0);
transition: transform0.5s ease-in-out;
letter-spacing: 10px;
}
}
}
页面渲染效果:
数字随机增长,模拟轮询效果
页面渲染完毕后,我们来让数字滚动起来,设计如下两个方法,其中 increaseNumber 需要在 Vue 生命周期 mounted 函数中调用
//定时增长数字
increaseNumber () {
let self= this
this.timer = setInterval(() =>{
self.newNumber= self.newNumber + getRandomNumber(1, 100)
self.setNumberTransform()
},3000)
},//设置每一位数字的偏移
setNumberTransform () {
let numberItems= this.$refs.numberItem
let numberArr= this.computeNumber.filter(item => !isNaN(item))for (let index = 0; index < numberItems.length; index++) {
let elem=numberItems[index]
elem.style.transform= `translate(-50%, -${numberArr[index] * 10}%)`
}
}
最终实现效果:
完整代码如下:
订单总量
0123456789
{{item}}
data() {return{
orderNum: ['0', '0', ',', '0', '0', '0', ',', '0', '0', '0'], //默认订单总数
}
}
mounted: {this.toOrderNum(num) //这里输入数字即可调用
},
methods: {//设置文字滚动
setNumberTransform () {
const numberItems= this.$refs.numberItem //拿到数字的ref,计算元素数量
const numberArr = this.orderNum.filter(item => !isNaN(item))//结合CSS 对数字字符进行滚动,显示订单数量
for (let index = 0; index < numberItems.length; index++) {
const elem=numberItems[index]
elem.style.transform= `translate(-50%, -${numberArr[index] * 10}%)`
}
},//处理总订单数字
toOrderNum(num) {
num=num.toString()//把订单数变成字符串
if (num.length < 8) {
num= '0' + num //如未满八位数,添加"0"补位
this.toOrderNum(num) //递归添加"0"补位
} else if (num.length === 8) {//订单数中加入逗号
num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)this.orderNum = num.split('') //将其便变成数据,渲染至滚动数组
} else{//订单总量数字超过八位显示异常
this.$message.warning('订单总量数字过大,显示异常,请联系客服')
}
},
}
}
/*订单总量滚动数字设置*/.box-item {
position: relative;
height: 100px;
font-size: 54px;
line-height: 41px;
text-align: center;
list-style: none;
color: #2D7CFF;
writing-mode: vertical-lr;
text-orientation: upright;/*文字禁止编辑*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/user-select: none;/*overflow: hidden;*/}/*默认逗号设置*/.mark-item {
width: 10px;
height: 100px;
margin-right: 5px;
line-height: 10px;
font-size: 48px;
position: relative;& >span {
position: absolute;
width:100%;
bottom:0;
writing-mode: vertical-rl;
text-orientation: upright;
}
}/*滚动数字设置*/.number-item {
width: 41px;
height: 75px;
background: #ccc;
list-style: none;
margin-right: 5px;
background:rgba(250,250,250,1);
border-radius:4px;
border:1px solid rgba(221,221,221,1);& >span {
position: relative;
display: inline-block;
margin-right: 10px;
width:100%;
height:100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;& >i {
font-style: normal;
position: absolute;
top: 11px;
left:50%;
transform: translate(-50%,0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
}
}
.number-item:last-child {
margin-right: 0;
}
如果有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)...相关推荐
- 大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
- Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
- 《大屏可视化数据》该怎么设计?
前言:数据可视化是什么?可视化数据有哪些主要特征?为什么要使用大屏展示可视化数据?数据可视化是综合运用计算机图形学.图像.人机交互等,将采集.清洗.转换.处理过的符合标准和规范的数据映射为可识别的图形 ...
- 数据可视化UI设计素材资源文件sketch大屏可视化数据展示
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,也得益于PSD素材较多,所以用的设计工具大多是Photoshop,但Photos ...
- 数据可视化UI设计素材资源文件psd大屏可视化数据展示Photoshop设计文件
大数据时代,基于大量数据进行有效的分析和挖掘,建立可视化大屏展示,提供震撼的效果让用户读懂数据,了解数据背后的价值.近几年该类应用场景越来越广泛,软件开发和设计中可视化展示放在越来越重要的位置,在此分 ...
- Vue React大屏可视化进阶
文章目录 前言 图表概览 图表优势 各类图表 1. G2
- vue移动端用什么数据可视化插件_vue框架大屏可视化
现在越来越多公司引入可视化大屏,不仅炫酷,而且能更直观的看到各个维度的数据!现在收费的大屏可视化服务很多,比如阿里云datav.百度Sugar.腾讯云图等.vue框架大屏可视化,因为开源免费功能又好, ...
- 应急管理大屏可视化决策系统产品白皮书
1 产品概述 数字冰雹应急管理大屏可视化决策系统,面向应急指挥中心大屏环境,具备优秀的大数据显示性能以及多机协同管理机制,支持大屏.多屏.超大分辨率等显示情景. 支持整合应急管理部门现有信息系统的数 ...
- 智慧交管大屏可视化决策系统
产品概述 数字冰雹智慧交管大屏可视化决策系统,面向交管指挥中心大屏环境,具备优秀的大数据显示性能以及多机协同管理机制,支持大屏.多屏.超大分辨率等显示情景. 支持整合交管部门现有信息系统的数据资源, ...
最新文章
- eclipse插件 android模拟器,关于eclipse:ADT插件中的android模拟器没有运行
- memcache基础教程
- numpy.random.choice用法
- 如果你的Windows无法连接L2TP协议的***,809错误
- 【错误记录】Visual Studio 中编译 NDK 报错 ( no matching function for call to ‘cacheflush‘ cacheflush(); )
- Kinect 深度数据
- IDE之Eric:Python的IDE之eric的简介、安装、使用方法之详细攻略
- win7配置计算机失败怎么办,电脑win7配置失败 还原更新 怎么处理 不要说重装
- Python实现的导弹跟踪算法,燃!
- RHEL4- ssh服务(二)ssh服务器的配置和启动
- c语言中-(间接成员运算符)的含义
- 学生选课系统,第二版
- 拖拽文件作为文件输入
- redis实现订单过期取消
- 【VRP】基于matlab遗传算法求解出租车网约车接送客车辆路径规划问题【含Matlab源码 YC003期】
- 软件需求分析模板2020-11-04
- java围棋毕业设计,基于Java的围棋游戏的设计与实现.docx
- 负指数分布的性质_负指数分布.ppt
- 信号与系统(3.1)- RLC 串联电路的零输入响应
- 深度学习-86:深度学习的降维攻击及流派
热门文章
- 爬取京东上商品的所有详细信息
- VB.NET版机房收费系统---报表
- java.lang.NoSuchFieldError: No static field web_title of type I in class Lcom/cnlive/webview/R$id;
- 跨域Access-Control-Allow-Origin解决方案
- 十二生肖中解释出的“新睡眠观”
- 全国计算机一级考试照片底色,2017年计算机一级考试MSOffice考点解析:幻灯片背景的设置...
- Linux远程联机服务——Tel服务器安装和使用详解
- Apex机器码-逃离塔科夫机器码(年度最新教程依旧可用)
- 基于Python的智能分班系统
- [转摘]了解 Windows Vista 内核:第三部分