JavaScript を使用してテキストのスクロール効果を実現するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用してテキストのスクロール効果を実現するにはどうすればよいですか?

WBOY

リリース： 2023-10-16 08:53:07

オリジナル

1739 人が閲覧しました

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

JavaScript を使用してテキストのスクロール効果を実現するにはどうすればよいですか?

テキストスクロール効果は、Web ページで一般的な動的効果であり、テキストのスクロール表示を通じてユーザーの注意を引き付け、ページの活力を高めることができます。以下では、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 という名前のアニメーションを定義しました。

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 を定義します。複数スクロールのテキストコンテンツ。タイマーを使用してスクロールテキストの内容を 3 秒ごとに変更し、テキストスクロールの効果を実現します。

上記の手順により、JavaScript を使用してテキストのスクロール効果を実現するプロセスが完了しました。必要に応じてコンテナとテキストのスタイルを調整でき、必要に応じてタイマーの時間間隔やスクロールするテキストの内容を変更することもできます。

上記のコード例が役に立ち、テキストのスクロール効果を正常に実現できることを願っています。私はあなたの成功を祈って！

以上がJavaScript を使用してテキストのスクロール効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。