Cara membuat bar pemberitahuan skrol responsif menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk membuat bar pemberitahuan skrol responsif

Dengan populariti peranti mudah alih dan akses pengguna ke tapak web Dengan peningkatan keperluan pengalaman, mereka bentuk bar pemberitahuan skrol responsif menjadi semakin penting. Reka bentuk responsif memastikan tapak web dipaparkan dengan betul pada peranti yang berbeza dan pengguna boleh melihat kandungan pemberitahuan dengan mudah. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta bar pemberitahuan skrol responsif dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur HTML. Dalam fail HTML anda, anda boleh menggunakan elemen dengan id untuk menahan kandungan bar pemberitahuan. Contohnya:

<div id="scrolling-news">
  <ul>
    <li>通知内容1</li>
    <li>通知内容2</li>
    <li>通知内容3</li>
    <li>通知内容4</li>
    <li>通知内容5</li>
  </ul>
</div>

Seterusnya, kita perlu menggunakan CSS untuk menentukan gaya dan reka letak bar pemberitahuan. Anda boleh menggunakan gaya berikut untuk mencipta gaya asas untuk bar pemberitahuan:

#scrolling-news {
  height: 40px;
  overflow: hidden;
}

#scrolling-news ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll 10s linear infinite;
}

#scrolling-news li {
  display: inline-block;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

Dalam kod di atas, kami menetapkan ketinggian bar pemberitahuan kepada 40px dan menetapkan sifat limpahannya kepada tersembunyi untuk menyembunyikan kandungan di luar julat. Kami menggunakan position:relative untuk menetapkan kaedah kedudukan elemen ul dan menetapkan gaya senarainya kepada tiada untuk mengalih keluar gaya senarai lalai. Kami juga menentukan animasi bernama tatal untuk menatal ke atas dan ke bawah kandungan pemberitahuan dengan menggunakan transform: translateY().

Kini, kita boleh menggunakan jQuery untuk menambahkan beberapa tindakan interaktif pada bar pemberitahuan. Perkenalkan perpustakaan jQuery ke dalam fail HTML anda, dan kemudian gunakan kod berikut:

$(document).ready(function() {
  var scrollingNews = $('#scrolling-news');
  var newsItems = scrollingNews.find('li');
  var newsIndex = 0;

  function scrollNews() {
    scrollingNews.find('ul').animate({ marginTop: '-40px' }, 400, function() {
      $(this).css({ marginTop: '0' }).find('li:first').appendTo(this);
    });
  }

  setInterval(scrollNews, 3000);
});

Dalam kod di atas, kami mula-mula menggunakan pemilih jQuery untuk mendapatkan elemen bar pemberitahuan dan kandungan pemberitahuan. Kemudian, kami mentakrifkan fungsi yang dipanggil scrollNews untuk melaksanakan kesan penatalan kandungan pemberitahuan. Dalam fungsi ini, kami menggunakan kaedah animate() jQuery untuk menatal ke atas dan ke bawah kandungan pemberitahuan, dan mengalihkan item pemberitahuan pertama ke penghujung senarai selepas penatalan selesai. Akhir sekali, kami menggunakan kaedah setInterval() untuk memanggil fungsi scrollNews dengan kerap untuk mencapai kesan tatal automatik.

Kini, apabila anda membuka halaman web anda, anda sepatutnya melihat bar pemberitahuan menatal responsif. Kandungan pemberitahuan akan menatal ke atas dan ke bawah pada kelajuan tertentu, dan apabila pemberitahuan baharu ditambahkan, ia akan menatal ke paparan secara automatik.

Dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta bar pemberitahuan skrol responsif dengan mudah. Kod sampel di atas hanyalah kaedah pelaksanaan asas Anda boleh mengubah suai gaya dan reka letak mengikut keperluan anda sendiri, dan menambah lebih banyak fungsi interaktif. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara membuat bar pemberitahuan skrol responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!