2021-12-11 无缝滚动
2021-12-11 本文已影响0人
玲珑花
项目中只用了插件vue-seamless-scroll，很好用
自己想着也实现一下无缝滚动，贴一下记录一下，基于html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#div {
height: 90px;
overflow-y: hidden;
}
ul {
transition: all 2s linear;
}
.item {
height: 30px;
display: block;
}
.item:nth-child(odd) {
color: #55AAFF;
}
@keyframes movey {
from {
transform: translateY(0);
}
to {
transform: translateY(-180px);
}
}
</style>
</head>
<body>
<div id="div">
<ul id="ul">
<li class="item">
111111111111111111111
</li>
<li class="item">
222222222222222222222222
</li>
<li class="item">
33333333333333
</li>
<li class="item">
444444444444444444
</li>
<li class="item">
5555555555555555555
</li>
<li class="item">
6666666666666666
</li>
</ul>
</div>
<script type="text/javascript">
// 动态配置可显示数量
let show = 2
var div = document.getElementById('div')
var ul = document.getElementById('ul')
let height = 30
let totle = 6
var max = -(height * totle)
var y = 0
// 动态设置父元素的高度
div.style.height = height * show + 'px'
init()
function init() {
interval = setInterval(() => {
ul.style.transition = ''
if (y <= -(height * (totle + 1))) {
ul.style.transition = 'all 0s linear'
y = height * show
} else {
ul.style.transition = 'all 1s linear'
}
ul.style.transform = 'translateY(' + y + 'px)'
y = y - height
}, 1000)
}
ul.addEventListener('mousemove', () => {
clearInterval(interval)
})
ul.addEventListener('mouseout', () => {
init()
})
</script>
</body>
</html>
image.png
