Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?

WBOY

Lepaskan： 2023-10-16 08:53:07

asal

1781 orang telah melayarinya

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

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?

Kesan tatal teks ialah kesan dinamik biasa pada halaman web Melalui paparan tatal teks, ia boleh menarik perhatian pengguna dan meningkatkan daya hidup halaman. Berikut akan memperkenalkan secara terperinci cara menggunakan JavaScript untuk mencapai kesan tatal teks, dengan contoh kod dilampirkan.

Buat struktur HTML

Mula-mula, buat bekas dalam halaman HTML untuk membungkus teks tatal. Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Tulis gaya CSS

Seterusnya, kita perlu menambah gaya pada bekas dan teks untuk menunjukkan kesan penatalan. Kodnya adalah seperti berikut:

#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%);
    }
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan ketinggian dan lebar tetap untuk bekas dan menggunakan overflow: hidden untuk menyembunyikan teks limpahan. Untuk menatal teks, kami menggunakan white-space: nowrap untuk menghalang teks daripada dibalut dan mentakrifkan animasi bernama scroll untuk mencapai kesan penatalan teks. 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);

Salin selepas log masuk

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

Akhir sekali, kita perlu menggunakan JavaScript untuk menjana teks tatal secara dinamik. Kami menggunakan pemasa untuk menukar kandungan teks tatal sekali-sekala. Kodnya adalah seperti berikut:

scrollText

teks untuk menyimpan berbilang penatalan kandungan teks. Gunakan pemasa untuk menukar kandungan teks tatal setiap tiga saat untuk mencapai kesan tatal teks. 🎜🎜Melalui langkah di atas, kami telah menyelesaikan proses menggunakan JavaScript untuk mencapai kesan penatalan teks. Anda boleh melaraskan gaya bekas dan teks mengikut keperluan anda, dan anda juga boleh mengubah suai selang masa pemasa dan kandungan teks tatal mengikut keperluan. 🎜🎜Saya harap contoh kod di atas akan membantu anda dan anda boleh berjaya mencapai kesan menatal teks. Saya doakan anda berjaya! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!