如何实现大屏数字滚动效果

效果：

思路：

简述：将数字按数组存，比如原来数字是2655，转为数组就是[2,6,5,5],然后循环这个数组，每个数组又创建了1-9数字，再根据数组的值来移动数字的位置

具体：我是用vue来写的，但实际上思路差不多的。

1.原来的数字转为数组,用split('')

   realTime() {return `${this.realTimeNum}`.split('') || 0},

2.循环原来的四个数字，然后写好对应的样式，每个数组，对应生成竖着排序的0-9

  <div v-for="(item, index) in this.realTime" :key="index" class="real-time-num" > //外层宽高和内层宽高要一样<div class="real-time-num-item"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></div>================以下是css部分===============
.real-time-num {display: inline-block;width: 66px;height: 98px;background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));font-size: 60px;margin-left: 3px;line-height: 98px;text-align: center;
}
.real-time-num>div{width: 66px;height: 98px;
}

像这个效果基本上都做得出来，

之后我们让数字移动到相应的位置，就要用到tranform, 让它移动数字个高度 :style="{transform: `translateY(-${item*98}px)`}"

<div>滚动效果</div><div v-for="(item, index) in this.realTime" :key="index" class="real-time-num"><div class="real-time-num-item" :style="{transform: `translateY(-${item*98}px)`}"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></div>

得到的效果

然后我们给transform加个过渡效果

.real-time-num-item{transition: all 1s ease-out;
}

就会得到以下

之后将框框外的内容都隐藏就好了

.real-time-num {display: inline-block;width: 66px;height: 98px;background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));font-size: 60px;margin-left: 3px;line-height: 98px;text-align: center;overflow: hidden; // 隐藏内容
}

就得到开头的效果了

如何实现大屏数字滚动效果相关推荐

html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
Web前端jQuery实现监控大屏数字滚动
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
vue 大屏数字上下滚动
vue 大屏数字上下滚动效果就是有数字变动时,会有一个动画跳到相应的数字,是上下滚动的那种. <div class="chartNum"><div class= ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
jquery实现数字滚动效果
因为需要,自己用jquery动手写了数字滚动效果实现原理 1.先确定数字最大的位数,比如说最大数为6位数,就画出一排6个高度为30px的方格; 2.然后在每个方格区域增加一竖排的 012345678 ...
大屏数据可视化效果如何提升
大屏作为一种新的媒体传播方式,在品牌宣传.信息展示.数据分析与监控等各个场景有着重要的作用.因此大屏的数据可视化设计与开发是当下的一个热点.那么大屏数据可视化效果的提升该怎么操作呢? 我们将可视化效果 ...

如何实现大屏数字滚动效果

效果：

思路：

如何实现大屏数字滚动效果相关推荐

最新文章

热门文章