Cara menggunakan JavaScript untuk mencapai kesan tatal kiri dan kanan fon

Dengan pembangunan berterusan masyarakat, teknologi pembangunan bahagian hadapan menjadi semakin matang. Antaranya, JavaScript, sebagai salah satu bahasa pembangunan bahagian hadapan Web yang paling penting, mempunyai kebolehskalaan dan kebolehkendalian yang kaya. Dalam pembangunan sebenar, kami boleh menggunakan JavaScript untuk mencapai pelbagai kesan dinamik, seperti kesan tatal kiri dan kanan fon. Artikel ini akan memperkenalkan secara terperinci cara menggunakan JavaScript untuk mencapai kesan tatal kiri dan kanan fon.

1. Struktur HTML

Pertama, kita perlu mencipta bekas dalam html untuk memaparkan fon yang ingin kita tatal. Struktur html adalah seperti berikut:

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

Dalam struktur ini, kami menggunakan dua elemen: div bekas dan span teks. Antaranya, bekas div digunakan untuk mengehadkan julat penatalan teks dan teks span ialah kandungan teks yang akan ditatal.

2. Gaya CSS

Seterusnya, kita perlu menggunakan gaya CSS untuk mengubah suai struktur html di atas untuk memberikan kesan tatal. Gaya CSS adalah seperti berikut:

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

Kami menggunakan atribut overflow: hidden untuk menyembunyikan kandungan di luar skop bekas Dengan cara ini, kami boleh meletakkan semua kandungan teks untuk ditatal ke dalam bekas . Pada masa yang sama, kami menggunakan atribut white-space: nowrap untuk menghalang kandungan teks daripada dibalut. Atribut margin-right digunakan untuk mengawal kelajuan menatal Semakin besar nilai, semakin perlahan penatalan, dan sebaliknya.

Perkara yang paling penting ialah kami menggunakan atribut animation dalam CSS3 untuk menetapkan animasi menatal teks. Kata kunci @keyframes digunakan untuk mengisytiharkan bingkai utama animasi, iaitu, permulaan dan penghujung kesan penatalan. Dalam animasi textScroll, kami menetapkan keadaan awal kepada 0% dan keadaan akhir kepada -100%, iaitu, teks keluar dari bekas.

3. Interaksi JavaScript

Melalui tetapan gaya CSS di atas, kami telah melengkapkan reka letak kesan tatal, tetapi sebenarnya, kesan tatal adalah kesan pemaparan pelayar dan bukan dilaksanakan secara langsung oleh JavaScript. Untuk mengawal kesan penatalan ini, kami juga memerlukan tahap interaksi JavaScript tertentu. Seterusnya, kami akan menggunakan JavaScript untuk memulakan dan menghentikan penatalan teks.

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

Kami menggunakan kaedah document.getElementById untuk mendapatkan elemen teks untuk ditatal dan mendapatkan animasi teks dengan mendapatkan atribut animation bagi elemen teks. Kemudian, anda boleh menghentikan kesan menatal teks dengan menetapkan atribut animation elemen kepada none. Akhir sekali, kami menggunakan kaedah setTimeout untuk memulihkan tatal teks secara tak segerak, iaitu memulihkan tetapan animation awal.

Melalui interaksi JavaScript di atas, kami telah menyelesaikan pelaksanaan kesan penatalan teks.

4. Ringkasan

Setakat ini, kami telah berjaya melaksanakan kaedah JavaScript untuk mencapai kesan tatal kiri dan kanan fon. Kesan penatalan teks boleh ditetapkan melalui gaya CSS, dan permulaan dan penghentian penatalan teks boleh dikawal melalui interaksi JavaScript, yang mempunyai kepraktisan dan nilai rujukan tertentu. Saya harap artikel ini dapat membantu pembangun yang baru menggunakan JavaScript dan terus menyokong pertumbuhan teknologi pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk mencapai kesan tatal kiri dan kanan fon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!