console
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<style>
#scroll-container {
width: 300px;
height: 250px;
overflow: hidden;
position: relative;
cursor: move;
}
#scroll-text {
position: absolute;
width: 100%;
height: auto;
margin: 0;
line-height: 25px;
text-align: center;
user-select: none;
background-color: yellow;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="scroll-text">
<div class="data data-eight" style="height:auto;">
<div class="temperature" style="display: none;">大气温度<br>24.1℃</div>
<div class="pressure" style="display: none;">大气气压<br>1000 hPa</div>
<div class="unit"></div>
<ul class="ele"></ul>
<ul class="error-list"></ul>
<p><span>核心CPU温度</span><span>27.8</span><span>℃</span></p>
<p><span>系统CPU占用</span><span>8.25</span><span>%</span></p>
<p><span>系统内存剩余</span><span>2739</span><span>MB</span></p>
<p><span>系统磁盘剩余</span><span>31754</span><span>MB</span></p>
<p><span>网络下载速度</span><span>34</span><span>KB</span></p>
<p><span>网络上传速度</span><span>5</span><span>KB</span></p>
<p><span>网络1</span><span>开启</span><span></span></p>
<p><span>网络2</span><span>开启</span><span></span></p>
<p><span>网络3</span><span>开启</span><span></span></p>
<p><span>核心主板温度</span><span>1</span><span>℃</span></p>
<p><span>电池电量</span><span>1</span><span>(Lsp)</span></p>
<p><span>用户CPU占用</span><span>1</span><span>%</span></p>
<p><span>系统磁盘剩余</span><span>1</span><span>(Lsp)</span></p>
<p><span>4G信号强度</span><span>1</span><span>(Lsp)</span></p>
</div>
</div>
</div>
<script>
const scroll = {
speed: 1,
milliSeconds: 500,
isDragging: false,
dragStartY: 0,
offsetY: 0,
stop: false,
container: document.getElementById('scroll-container'),
text: document.getElementById('scroll-text'),
transition: false,
translateY: 0,
init() {
this.bindEvents();
this.moveNext();
},
bindEvents() {
this.container.addEventListener('mousedown', (event) => {
this.isDragging = true;
this.stop = true;
this.dragStartY = event.clientY - this.translateY;
this.text.style.transition = '';
});
this.container.addEventListener('mousemove', (event) => {
if (this.isDragging) {
this.offsetY = event.clientY - this.dragStartY;
this.translateY = this.offsetY;
this.text.style.transform = `translateY(${this.offsetY}px)`;
}
});
this.container.addEventListener('mouseleave', (event) => {
this.isDragging = false;
this.stop = false;
this.moveNext();
});
this.container.addEventListener('mouseup', (event) => {
this.isDragging = false;
});
this.container.addEventListener('mouseover', (event) => {
this.stop = true;
});
},
moveNext() {
if (this.stop) {
return;
}
const maxHeight = this.container.offsetHeight;
const textHeight = this.text.offsetHeight;
if (this.offsetY + textHeight < 0) {
this.offsetY = maxHeight;
this.text.style.transition = '';
} else if (this.offsetY - maxHeight > 0) {
this.offsetY = maxHeight;
} else {
this.offsetY -= this.speed * this.milliSeconds / 1000;
if (!this.transition) {
this.text.style.transition = `transform ${this.milliSeconds / 1000}s linear`;
this.transition = true;
}
}
this.translateY = this.offsetY;
this.text.style.transform = `translateY(${this.offsetY}px)`;
requestAnimationFrame(() => {
this.moveNext();
});
},
};
scroll.init();
</script>
</body>
</html>