今天公司项目遇到一个需求，要求实时间隔滚动显示区块链信息，实时显示需要跟后台协商交互即可搞定。
那么问题就剩下我们拿到数据如何间隔滚动了，用jquery的时候可以直接用插件来搞定。
但是从接触vue之后，我就很少使用jquery写项目了，所以自己用原生coding一个，方便自己以后使用。
-
-
<html lang=“en”>
-
-
<head>
-
<meta charset=“UTF-8”>
-
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
-
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
-
<title>列表间隔滚动 </title>
-
<style>
-
#box {
-
width: 300px;
-
height: 300px;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
transform: translate(-50%, -50%);
-
border: 1px solid red;
-
overflow: hidden;
-
}
-
-
ul {
-
width: 100%;
-
float: left;
-
}
-
-
ul, li {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
ul> li {
-
height: 50px;
-
text-align: center;
-
line-height: 50px;
-
border-bottom: 1px solid red;
-
box-sizing: border-box;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div id=“box”>
-
<ul>
-
<li>1 </li>
-
<li>2 </li>
-
<li>3 </li>
-
<li>4 </li>
-
<li>5 </li>
-
<li>6 </li>
-
<li>7 </li>
-
</ul>
-
</div>
-
</body>
-
<script>
-
window.onload = function () {
-
var box = document.getElementById( ‘box’);
-
box.innerHTML += box.innerHTML;
-
box.scrollTop = 0;
-
var timer = setInterval(move, 50);
-
function move() {
-
box.scrollTop += 2;
-
if (box.scrollTop == box.scrollHeight / 2) {
-
box.scrollTop = 0;
-
}
-
//这里的50是我每个li的高度，根据自己的项目修改
-
if (box.scrollTop % 50 == 0) {
-
clearInterval(timer);
-
setTimeout( () => {
-
timer = setInterval(move, 50);
-
}, 3000)
-
}
-
};
-
}
-
</script>
-
-
</html>
扫一扫
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
