JavaScript mencapai kemahiran scrolling_javascript yang lancar dan lancar

Dalam artikel ini, kami melaksanakan kesan pengiklanan bergulir dalam JS tulen untuk rujukan anda Kandungan khusus adalah seperti berikut

Mari tunjukkan produk siap dahulu:

Yang pertama ialah gaya halaman web:

#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 1280px;
 height:200px;
 }
 #demo img {
 border: 3px solid #F2F2F2;
 }
 #indemo {
 float: left;
 width: 800%;
 }
 #demo1 {
 float: left;
 }
 #demo2 {
 float: left;
 }

Susun aturnya adalah seperti berikut:

 <div id="demo">
 <div id="indemo">
 <div id="demo1">
 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner.jpg"  class="lazy" border="0" / alt="JavaScript mencapai kemahiran scrolling_javascript yang lancar dan lancar" ></a>
 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner2.jpg"  class="lazy" border="0" / alt="JavaScript mencapai kemahiran scrolling_javascript yang lancar dan lancar" ></a>
 </div>
 <div id="demo2"></div>
 </div>
 </div>

Pelaksanaan JS khusus:

<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-tab.scrollLeft==0)
tab.scrollLeft-=tab1.offsetWidth
else{

 tab.scrollLeft++;

 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval
(Marquee,speed)};
</script>

Apa yang perlu diperhatikan di sini ialah:

scroll Kiri mewakili lebar halaman yang tersembunyi di sebelah kiri bar skrol apabila halaman itu ditatal ke kanan menggunakan bar skrol.

offsetWidth ialah lebar objek yang boleh dilihat, termasuk bar skrol dan tepi lain, yang akan berubah mengikut saiz paparan tetingkap.

Kaedah

setInterval() boleh memanggil fungsi atau mengira ungkapan mengikut tempoh yang ditentukan (dalam milisaat). Kaedah setInterval() akan terus memanggil fungsi sehingga clearInterval() dipanggil atau tetingkap ditutup.

Ia akan menjadi lebih mudah untuk difahami apabila anda memahami pelaksanaan khusus.

Prinsip pelaksanaan adalah seperti berikut: mula-mula salin kandungan yang perlu ditatal. Apabila kandungan yang dipaparkan oleh div kanan adalah sama dengan kandungan bayang-bayang kiri, kandungan bayang-bayang di sebelah kiri bekas induk dipaparkan Dengan cara ini, kandungan bayang-bayang kiri dipaparkan dan kandungannya di sebelah kanan disembunyikan semula. Jika kandungan yang dipaparkan di sebelah kanan kurang daripada kandungan yang tersembunyi di sebelah kiri, bekas induk akan terus dialihkan ke kiri untuk menyembunyikannya. Satu perkara yang perlu diambil perhatian ialah memandangkan kedua-dua gambar diletakkan di sebelah kiri pada masa yang sama, apabila separuh bahagian kanan dipaparkan, bayang-bayang tersembunyi di sebelah kiri akan dipaparkan sepenuhnya, dan kerana kandungan dipaparkan di sebelah kanan sisi berbeza daripada kandungan di sebelah kiri Kandungan di sebelah kiri adalah sama, jadi kesan tatal bulat dicapai.

Tatal lancar dicapai dengan cara ini.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.