vue3+ts-数据自动滚动效果

 html

<template>
	<div class="background">
		<div class="border">
			<div class="lt"></div>
			<div class="rt"></div>
			<div class="lb"></div>
			<div class="rb"></div>
		</div>
	</div>
	<div class="screen">
		<div class="mask"></div>
		<div class="innerbg">
			<table cellspacing="0">
				<tr>
					<td>IP 196.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 110.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 106.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 186.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 161.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 116.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 145.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 126.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 196.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 161.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 116.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 145.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 126.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 196.168.123.134 以游客访问该网站</td>
				</tr>
				<tr>
					<td>IP 196.168.123.134 以老板访问该网站</td>
				</tr>
			</table>
		</div>
	</div>
</template>

css

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	.background {
		position: absolute;
		width: 500px;
		height: 140px;
		box-sizing: border-box;
		top: 250px;
		background-color: rgb(162, 112, 112);
		left: 50%;
		transform: translate(-50%);
		z-index: -3;
	}

	.border {
		position: absolute;
		top: -5px;
		left: -5px;
		width: 510px;
		height: 150px;
		background-color: rgb(225, 255, 254);
		/* z-index: -4; */
		border: 2px solid rgb(72, 99, 255);
		box-sizing: border-box;
	}

	.lt {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: rgb(72, 99, 255);
		top: -4px;
		left: -4px;
		z-index: -10;
	}

	.rt {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: rgb(72, 99, 255);
		top: -4px;
		right: -4px;
		z-index: -10;
	}

	.lb {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: rgb(72, 99, 255);
		bottom: -4px;
		left: -4px;
		z-index: -10;
	}

	.rb {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: rgb(72, 99, 255);
		bottom: -4px;
		right: -4px;
		z-index: -10;
	}

	.screen {
		position: relative;
		width: 500px;
		height: 140px;
		box-sizing: border-box;
		margin: 250px auto;
		background-color: transparent;
		overflow: hidden;
		cursor: pointer;
	}

	.innerbg {
		position: absolute;
		top: 0px;
		width: 100%;
		background-color: rgb(0, 8, 229);
		z-index: -2;
	}

	table {
		width: 100%;
		border: 1px solid grey;
	}

	tr {
		width: 100%;
		// height: 20px;
	}

	td {
		width: 100%;
		height: 30px;
		border-bottom: 1px solid grey;
		text-align: center;
		color: #fff;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 500px;
		height: 140px;
		background-image: linear-gradient(
			to bottom,
			rgba(29, 29, 29, 0.726),
			rgba(62, 62, 62, 0.448),
			rgba(255, 255, 255, 0),
			rgba(60, 60, 60, 0.505),
			rgba(31, 31, 31, 0.764)
		);
	}
</style>

js

<script setup lang="ts">
	import { onMounted } from 'vue'

	const state = reactive({
		inner: null as unknown as HTMLElement,
		screen: null as unknown as HTMLElement,
		mask: null as unknown as HTMLElement,
	})

	const { inner, screen, mask } = toRefs(state)

	onMounted(() => {
		inner.value = document.querySelector('.innerbg') as HTMLElement
		screen.value = document.querySelector('.screen') as HTMLElement
		mask.value = document.querySelector('.mask') as HTMLElement
		let timer = window.setInterval(animate, 16)

		mask.value.addEventListener('mouseover', function () {
			window.clearInterval(timer)
		})
		mask.value.addEventListener('mouseout', function () {
			timer = window.setInterval(animate, 16)
		})
	})
	function animate() {
		// 467 - 140
		if (inner.value.offsetTop === -(inner.value.offsetHeight - screen.value.offsetHeight + 10)) {
			inner.value.style.top = 0 + 'px'
		} else {
			let l = inner.value.offsetTop
			l = l - 1
			inner.value.style.top = l + 'px'
		}
	}