一文看懂大屏数字滚动
前言
在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如View Design中)里,或者是countUp插件中都可以找到。
一、html
html部分只定义一个简单的容器,几个数字是靠js实现的,有更大的灵活性。
<div class="container"></div>
二、js生成展示的元素
注:本段代码是以原生js实现,若项目需要,可以自行转为Jquery形式或者Vue中的v-for生成
var computeNumber = [];
// 根据实际情况确定几位数
var digitNum = 5;
setComputeNum(getRandomNumber());
// 生成0-99999随机数
function getRandomNumber () {
return Math.floor(Math.random() * Math.pow(10,digitNum));
};
function setComputeNum(num) {
num = num.toString()
if (num.length < digitNum) {
// 如未满5位数,在前面补位"0"
num = '0' + num;
setComputeNum(num);
} else if (num.length === digitNum) {
computeNumber = num.split('');
}
}
for(let i = 0; i<computeNumber.length; i++){
// 创建span节点
var spanParent = document.createElement("span");
var spanSon = document.createElement("span");
// 创建文本节点
var node = document.createTextNode("0123456789");
spanSon.appendChild(node);
spanParent.append(spanSon);
spanParent.className = "box-item";
document.getElementsByClassName("container")[0].append(spanParent);
}
三、css实现样式
.container{
margin: 40px auto;
text-align: center;
}
.box-item {
position: relative;
display: inline-block;
width: 54px;
height: 82px;
background: url("./../img/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: translate(-50%,0);
transition: transform 1s ease;
letter-spacing: 10px;
color: orange;
}
四、加入动画和定时器
var timer = setInterval(()=>{
setComputeNum(getRandomNumber());
setTransform();
},3000)
// 设置每一位数字的偏移
function setTransform() {
let boxItem = document.getElementsByClassName("box-item");
let spans = [];
for(let i = 0;i<boxItem.length;i++){
spans.push(boxItem[i].getElementsByTagName("span")[0]);
}
for (let index = 0; index < spans.length; index++) {
let elem = spans[index];
elem.style.transform = `translate(-50%, -${computeNumber[index] * 10}%)`;
}
};
这样就实现了随机数字上下滚动的效果了。
感谢浏览!