JavaScript 实现文字上下滚动效果（附完整源码）

源代码大师

于 2023-11-01 22:53:57 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript实战教程文章标签： javascript 开发语言 ecmascript

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/134171996

JavaScript实战教程专栏收录该内容

950 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript实现文字上下滚动效果。通过HTML、CSS和JavaScript代码的结合，利用改变元素的`top`属性来更新文字位置，从而达到滚动显示的效果。详细步骤和完整源码在原文中提供。

JavaScript 实现文字上下滚动效果

以下是一份完整的 JavaScript 代码，实现文字上下滚动效果：

HTML 代码：

<div id="scroll-text">
  <p>这里是需要滚动的文字。</p>
  <p>这是第二行需要滚动的文字。</p>
  <p>这是第三行需要滚动的文字。</p>
</div>

CSS 代码：

#scroll-text {
  height: 100px; /* 设置显示区域的高度 */
  overflow: hidden; /* 隐藏溢出部分的内容 */
}

#scroll-text p {
  line-height: 30px; /* 设置行高 */
}

JavaScript 代码：

// 获取滚动区域元素和文字元素集合
var scrollText = document.getElementById('scroll-text');
var textNodes = scrollText.getElementsByTagName('p');

// 定义滚动速度
var speed = 1;

// 初始化滚动区域高度和当前滚动位置
var scrollHeight = scrollText.offsetHeight;
var currentPos = 0;

// 滚动函数
function scrollUp() {
  currentPos += speed;
  if (currentPos >= scrollHeight) {
    currentPos = 0;
  }
  scrollText.scrollTop