JavaScript를 사용하여 텍스트 스크롤 효과를 얻는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 텍스트 스크롤 효과를 얻는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-10-16 08:53:07

원래의

1710명이 탐색했습니다.

如何使用 JavaScript 实现文字滚动效果？

JavaScript를 사용하여 텍스트 스크롤 효과를 얻는 방법은 무엇입니까?

텍스트 스크롤 효과는 웹 페이지에서 흔히 볼 수 있는 동적 효과로, 텍스트 스크롤 표시를 통해 사용자의 관심을 끌고 페이지의 활력을 높일 수 있습니다. 다음은 JavaScript를 사용하여 텍스트 스크롤 효과를 얻는 방법을 코드 예제와 함께 자세히 소개합니다.

HTML 구조 만들기

먼저 HTML 페이지에 컨테이너를 만들어 스크롤 텍스트를 래핑합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>文字滚动效果</title>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">这是一段滚动的文字。</div>
    </div>

    <script src="scroll.js"></script>
</body>
</html>

로그인 후 복사

CSS 스타일 작성

다음으로 스크롤 효과를 표시하기 위해 컨테이너와 텍스트에 스타일을 추가해야 합니다. 코드는 다음과 같습니다.

#scroll-container {
    overflow: hidden;
    height: 30px;
    width: 200px;
}

#scroll-text {
    white-space: nowrap;
    animation: scroll 5s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
    }
}

로그인 후 복사

위 코드에서는 컨테이너의 고정 높이와 너비를 설정하고 overflow:hidden을 사용하여 오버플로 텍스트를 숨겼습니다. 스크롤되는 텍스트의 경우 white-space: nowrap를 사용하여 텍스트가 줄바꿈되는 것을 방지하고 scroll이라는 애니메이션을 정의하여 텍스트의 스크롤 효과를 얻습니다. overflow: hidden 隐藏溢出的文字。对于滚动的文字，我们使用了 white-space: nowrap 禁止文字换行，并定义了一个名为 scroll 的动画，实现文字的滚动效果。

编写 JavaScript 代码

最后，我们需要使用 JavaScript 来动态生成滚动文字。我们使用一个计时器，每隔一段时间改变滚动的文字内容。代码如下：

var scrollText = document.getElementById('scroll-text');
var texts = ['这是一段滚动的文字。', '这是第二段滚动的文字。', '这是第三段滚动的文字。'];
var index = 0;

setInterval(function() {
    scrollText.textContent = texts[index];
    index = (index + 1) % texts.length;
}, 3000);

로그인 후 복사

在上述代码中，我们首先获取滚动文字的元素节点 scrollText，然后定义一个数组 texts

마지막으로 JavaScript를 사용하여 스크롤 텍스트를 동적으로 생성해야 합니다. 우리는 가끔씩 스크롤되는 텍스트 내용을 변경하기 위해 타이머를 사용합니다. 코드는 다음과 같습니다.

scrollText

texts

위 내용은 JavaScript를 사용하여 텍스트 스크롤 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!