Bagaimana untuk melaksanakan fungsi gesaan gelembung dalam JavaScript?-tutorial js-php.cn

JavaScript 如何实现气泡提示功能？

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

Salin selepas log masuk

Dalam contoh ini, kami mencipta elemen

dengan petua alat id dan menambah kelas gaya bernama petua alat padanya. Elemen

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;
}

Salin selepas log masuk

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';
  });
});

Salin selepas log masuk

Dalam contoh ini, kami mula-mula mendengar acara DOMContentLoaded dan melaksanakan kod selepas halaman dimuatkan. Kemudian, kami memperoleh elemen

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

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

Salin selepas log masuk

Dalam contoh ini, kami menambahkan atribut petua alat data pada elemen

dan menetapkan teks petua alat yang perlu dipaparkan sebagai nilai atribut. Apabila tetikus melayang di atas elemen

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!

Label berkaitan：

javascript 实现方法 hujung gelembung

sumber：php.cn

Artikel sebelumnya：HTML, CSS dan jQuery: Cipta kesan animasi lungsur turun menu navigasi Artikel seterusnya：Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi pemangkasan dan zum imej lanjutan

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang