Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?
Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal teks?
- WBOYasal
- 2023-10-16 08:53:071781semak imbas
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>
- 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%);
}
}
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);
在上述代码中，我们首先获取滚动文字的元素节点 scrollText，然后定义一个数组 texts
- Tulis kod JavaScript
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:
rrreee🎜Dalam kod di atas, kami mula-mula mendapatkan nod elemenscrollText teks menatal, dan kemudian menentukan tatasusunan 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!