<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下滚动文字</title>
<style>
.scroll-container {
height: 20px; /* 设置滚动区域的高度 */
overflow: hidden; /* 隐藏溢出内容 */
position: relative;
}
.scroll-content {
position: absolute;
top: 0;
animation: scroll 20s linear infinite; /* 设置滚动动画 */
}
@keyframes scroll {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%); /* 负值等于滚动区域高度 */
}
}
</style>
</head>
<body>
<div class="scroll-container" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
<div class="scroll-content">
<p>这里是要滚动的文字内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<p>这是第二行内容。</p>
<!-- 添加更多内容 -->
</div>
</div>
<script>
// 获取滚动内容的高度
const scrollContent = document.querySelector('.scroll-content');
const scrollContentHeight = scrollContent.clientHeight;
// // 设置滚动容器的高度为滚动内容的高度的两倍,确保内容滚动完后仍然有内容可见
// const scrollContainer = document.querySelector('.scroll-container');
// scrollContainer.style.height = `${scrollContentHeight * 2}px`;
// 当动画完成时,重新开始滚动
scrollContent.addEventListener('animationiteration', () => {
scrollContent.style.transform = 'translateY(0%)';
});
// 暂停滚动
function pauseScroll() {
scrollContent.style.animationPlayState = 'paused';
}
// 恢复滚动
function resumeScroll() {
scrollContent.style.animationPlayState = 'running';
}
</script>
</body>
</html>
js写文字滚动 上下滚动
最新推荐文章于 2024-08-25 09:57:22 发布