Dalam artikel ini, kami menyadari efek menggulir iklan dalam mode JS murni.
Mari kita tunjukkan produk jadi terlebih dahulu:
Pertama -tama, gaya halaman web:
#demo {latar belakang: #fff; meluap: tersembunyi; Perbatasan: 1px putus #CCC; Lebar: 1280px; Tinggi: 200px; } #demo img {border: 3px solid #f2f2f2; } #indemo {float: left; Lebar: 800%; } #demo1 {float: left; } #demo2 {float: left; }Tata letaknya adalah sebagai berikut:
<Div id = "Demo"> <Div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/</a> <a href = "#" </div> div = "banner2.
Implementasi JS spesifik:
<script> var speed = 10; var tab = document.getElementById ("demo"); var tab1 = document.geteLementById ("demo1"); var tab2 = document.geteLementById ("demo2"); tab2.innerHtml = tab1.innerHtml; function marquee () {if (tab2.offsetWidth-ab.scrollft == 0) tab.scrollleft- = tab1.offsetWidth lain {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onMouseOver = function () {clearInterval (mymar)}; tab.onMouseout = function () {mymar = setInterval (marquee, speed)}; </script>Apa yang harus dicatat di sini adalah:
Scrollleft mewakili lebar halaman yang tersembunyi di sebelah kiri scrollbar ketika halaman menggunakan scrollbar untuk menggulir ke kanan.
OffsetWidth adalah lebar yang terlihat dari objek, yang membungkus bilah gulir dan sama dengan tepi, yang akan berubah dengan ukuran tampilan jendela.
Metode setInterval () dapat memanggil fungsi atau menghitung ekspresi sesuai dengan periode yang ditentukan (dalam milidetik). Metode setInterval () akan terus memanggil fungsi sampai clearInterval () dipanggil atau jendela ditutup.
Mudah dimengerti jika Anda memahami implementasi khusus ini.
Prinsip implementasi adalah sebagai berikut: Salin pertama salinan konten yang perlu digulir. Ketika konten yang ditampilkan oleh div di sebelah kanan adalah lebar yang sama dengan konten yang tersembunyi di bayangan kiri, konten yang tersembunyi di bayangan kiri wadah induk ditampilkan, sehingga konten yang tersembunyi di bayangan kiri ditampilkan dan konten yang tersembunyi di sebelah kanan dikembalikan. Jika konten di sisi kanan menampilkan lebih sedikit dari konten yang tersembunyi di sisi kiri, terus bicarakan tentang wadah induk yang ingin pindah ke kiri untuk mewujudkan bayangan yang tersembunyi. Satu hal yang perlu diperhatikan adalah bahwa karena dua gambar ditempatkan di sisi kiri pada saat yang sama, ketika sisi kanan setengah ditampilkan, bayangan yang tersembunyi di sisi kiri akan ditampilkan sepenuhnya. Karena konten yang ditampilkan di sisi kanan sama dengan konten di sisi kiri, efek gulir loop tercapai.
Gulir yang halus ini tercapai.
Kode di atas untuk mengimplementasikan Efek Gulir JS yang halus dan mulus adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.