Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan fungsi gesaan gelembung dalam JavaScript?
Bagaimana untuk melaksanakan fungsi gesaan gelembung dalam JavaScript?
- WBOYasal
- 2023-10-27 15:25:481442semak imbas
Bagaimana untuk melaksanakan fungsi gesaan gelembung dalam JavaScript?
Fungsi gesaan gelembung juga dipanggil kotak gesaan pop timbul Ia boleh digunakan untuk memaparkan beberapa maklumat gesaan sementara pada halaman web, seperti memaparkan maklum balas operasi yang berjaya, memaparkan maklumat yang berkaitan apabila tetikus melayang di atas elemen. , dsb. Dalam artikel ini, kita akan mempelajari cara menggunakan JavaScript untuk melaksanakan fungsi gesaan gelembung dan menyediakan beberapa contoh kod khusus.
Langkah pertama: Struktur HTML
Pertama, kita perlu menambah bekas untuk memaparkan gesaan gelembung dalam HTML. Bekas ini boleh ditambahkan di mana-mana sahaja pada halaman, seperti di hujung teg 6c04bd5ca3fcae76e30b72ad730ca86d Berikut ialah contoh struktur HTML:
<!DOCTYPE html>
<html>
<head>
<title>气泡提示功能</title>
<style>
.tooltip {
position: absolute;
display: none;
padding: 10px;
color: #fff;
background-color: #000;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="tooltip" class="tooltip"></div>
<!-- 其他页面内容 -->
</body>
</html>Dalam contoh ini, kami mencipta elemen dc6dce4a544fdca2df29d5ac0ea9906b dengan petua alat id dan menambah kelas gaya bernama petua alat padanya. Elemen dc6dce4a544fdca2df29d5ac0ea9906b akan berfungsi sebagai bekas untuk kotak gesaan gelembung Kami akan mengawal paparannya dan bersembunyi dalam JavaScript dan mengisi kandungan segera apabila diperlukan.
Langkah 2: Gaya CSS
Seterusnya, kami mentakrifkan beberapa gaya CSS asas untuk kotak gesaan gelembung. Gaya ini boleh diubah suai mengikut keperluan projek sebenar Berikut ialah contoh gaya mudah:
.tooltip {
position: absolute;
display: none;
padding: 10px;
color: #fff;
background-color: #000;
border-radius: 5px;
}Dalam contoh ini, kami menetapkan kaedah kedudukan kotak gesaan kepada kedudukan mutlak melalui atribut kedudukan, supaya ia boleh dipaparkan di mana-mana sahaja. halaman tersebut. Ia disembunyikan secara lalai melalui atribut paparan. Tetapkan jidar dalam melalui atribut pelapik, tetapkan warna teks dan warna latar belakang melalui atribut warna dan warna latar belakang, dan tetapkan sudut bulat sempadan melalui atribut jejari sempadan.
Langkah 3: Kod JavaScript
Kini, kami mula menulis kod JavaScript untuk melaksanakan fungsi gesaan gelembung. Dalam contoh berikut, kami menggunakan atribut data-* HTML untuk menyimpan teks gesaan dan menggunakan peristiwa tetikus untuk mengawal paparan dan penyembunyian kotak gesaan. Kodnya kelihatan seperti ini:
window.addEventListener('DOMContentLoaded', function() {
var tooltip = document.getElementById('tooltip');
// 鼠标悬浮在元素上时显示提示框
document.addEventListener('mouseover', function(event) {
var target = event.target;
var tooltipText = target.getAttribute('data-tooltip');
if (tooltipText) {
tooltip.innerHTML = tooltipText;
tooltip.style.display = 'block';
tooltip.style.left = (event.clientX + 10) + 'px';
tooltip.style.top = (event.clientY + 10) + 'px';
}
});
// 鼠标移出元素时隐藏提示框
document.addEventListener('mouseout', function() {
tooltip.style.display = 'none';
});
});Dalam contoh ini, kami mula-mula mendengar acara DOMContentLoaded dan melaksanakan kod selepas halaman dimuatkan. Kemudian, kami memperoleh elemen dc6dce4a544fdca2df29d5ac0ea9906b yang digunakan untuk memaparkan kotak gesaan dan mendengar acara alih tetikus dan acara keluar tetikus melalui kaedah addEventListener. Apabila tetikus melayang di atas elemen dengan atribut petua alat data, kami mengisi teks petua yang diperoleh ke dalam elemen dc6dce4a544fdca2df29d5ac0ea9906b ;elemen.
Langkah 4: Gunakan fungsi hujung gelembung
Kini, kita boleh menggunakan fungsi hujung gelembung dengan menambahkan atribut petua alat data dalam HTML. Berikut ialah contoh:
<p data-tooltip="这是一个气泡提示功能的示例">悬浮在我上面查看提示</p>
Dalam contoh ini, kami menambahkan atribut petua alat data pada elemen e388a4556c0f65e1904146cc1a846bee dan menetapkan teks petua alat yang perlu dipaparkan sebagai nilai atribut. Apabila tetikus melayang di atas elemen e388a4556c0f65e1904146cc1a846bee ini, kotak gesaan gelembung akan memaparkan kandungan gesaan yang sepadan.
Ringkasan
Melalui langkah di atas, kami telah mempelajari cara menggunakan JavaScript untuk melaksanakan fungsi gesaan gelembung dan menyediakan contoh kod yang berkaitan. Gaya dan fungsi boleh diselaraskan mengikut keperluan projek sebenar untuk menjadikan kotak gesaan gelembung lebih selaras dengan keperluan projek.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi gesaan gelembung dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!