实现效果:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字滚动</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<ul>
<p>最新<span>成功领取</span>客户</p>
<div></div>
</ul>
<script>
const ul = document.querySelector("ul>div");
let dataArr = [];
// 添加数据
for (let i = 0; i < 100; i++) {
dataArr.push(i + 1 + "大是大非水果放到SV瞅瞅");
}
// 初始渲染4条数据
for (let i = 0; i < 4; i++) {
const li = document.createElement("li");
li.innerHTML = dataArr[i];
ul.appendChild(li);
}
</script>
<script src="./index.js"></script>
</body>
</html>
index.css:
li {
width: 100%;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
color: rgba(51, 136, 255, 0.2);
position: absolute;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 2s;
}
ul {
width: 300px;
height: auto;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
margin: 0;
border-radius: 20px;
background: rgba(51, 136, 255, 0.08);
}
ul p {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
color: rgb(51, 136, 255);
}
ul p span {
padding: 3px 10px;
margin: 0 5px;
border-radius: 15px;
color: #fff;
background-color: rgb(51, 136, 255);
}
ul>div {
height: 120px;
overflow: hidden;
position: relative;
}
/* 中间数据的选中样式 */
ul>div li:nth-child(2) {
font-size: 18px;
font-weight: bold;
border-radius: 10px;
color: rgb(51, 136, 255);
background-color: rgba(51, 136, 255, 0.15);
}
index.js:
let timer = null;
let li = document.querySelectorAll("li");
// 保存页面中四条数据的top值
let topArr = [0, 40, 80, 120];
// 初始给每一条数据添加top值
for (let i = 0; i < li.length; i++) {
li[i].style.top = topArr[i] + "px";
}
function run() {
timer = setInterval(() => {
for (let i = 0; i < topArr.length; i++) {
// 当第一条数据移出dom外面时
if (topArr[0] == -40) {
// 暂停计时器
clearInterval(timer);
// 将第一条数据添加到最后
dataArr.push(li[0].innerHTML);
// 删除第一条数据
dataArr.shift();
// 将第3条数据添加到dom的最后
const liDom = document.createElement("li");
liDom.innerHTML = dataArr[3];
ul.appendChild(liDom);
// 删除dom的第一条数据
ul.removeChild(li[0]);
topArr.shift();
topArr.push(120);
// 重新获取结构改变后的dom
li = document.querySelectorAll("li");
setTimeout(() => {
// li[3].style.top = topArr[3] + "px";
run();
}, 2000);
}
// 自减
topArr[i] -= 1;
// 重新赋值
li[i].style.top = topArr[i] + "px";
}
}, 20);
}
run();