文字滚动效果

htmlcssjs

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>带你实现文字滚动效果</title>
		<link
			rel="stylesheet"
			href="style.css"
		/>
	</head>
	<body>
		<div class="container">
			<ul class="list">
				<li>床前明月光，</li>
				<li>疑是地上霜。</li>
				<li>举头望明月，</li>
				<li>低头思故乡。</li>
			</ul>
			<div class="search">搜索</div>
		</div>
		<script src="./index.js"></script>
	</body>
</html>

css

.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	padding: 3px;
	border: 2px solid #ff0f23;
	border-radius: 10px;
}
.list {
	/* 去掉点 */
	list-style: none;
	margin: 0;
	padding: 0;
	height: 36px;
	/* 横向溢出隐藏，纵向溢出滚动条*/
	overflow: hidden;
	margin-left: 10px;
}
.list li {
	height: 36px;
	line-height: 36px;
}
.search {
	width: 80px;
	height: 36px;
	border-radius: 6px;
	background-color: #ff0f23;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 36px;
	text-align: center;
}

// 初始化：一开始做什么
// 交互：用户操作之后要做什么
;(function () {
	// 初始化
	const list = document.querySelector(".list")
	// 1.将列表中的第一个元素克隆到列表的最后一个
	function cloneFirstItem() {
		const firstItem = list.children[0]
		// true深度克隆，false浅克隆，只克隆标签，不克隆属性及内容
		const newItem = firstItem.cloneNode(true)
		list.appendChild(newItem)
	}
	cloneFirstItem()

	// 2.滚动：列表每隔一段时间，将列表滚动到下一个位置
	let duration = 2000 // 滚动的间隔时间
	setInterval(moveNext, duration)

	// 将列表滚动到下一个位置
	let currentIndex = 0 // 目前展示的是第几项
	const itemHeight = 36 // 元素的高度
	function moveNext() {
		let from = currentIndex * itemHeight // 当前项的滚动高度
		currentIndex++
		let to = currentIndex * itemHeight // 下一项的滚动高度

		// 让list的scrollTop，从from慢慢变为to
		// 慢慢变为：在一段时间内，每隔一小段时间，变化一点
		const totalDuration = 500 // 动画的总时长
		const step = 10 // 变化的间隔时间(动画的每一步的时长)
		const times = totalDuration / step // 变化的次数
		const dis = (to - from) / times // 每次变化的量

		const timer = setInterval(() => {
			from += dis
			if (from >= to) {
				clearInterval(timer)
				// 滚动完成后，如果是最后一项
				if (currentIndex >= list.children.length - 1) {
					// 重置到列表的开始
					currentIndex = 0
				}
			}
			list.scrollTop = from
		}, step)
	}
})()

文字滚动效果 ​

文字滚动效果