JS kemahiran pelaksanaan kesan tatal lancar lancar code_javascript

Dalam artikel ini, kami melaksanakan kesan pengiklanan menatal dalam JS tulen.

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="banner.jpg" border="0" / alt="JS kemahiran pelaksanaan kesan tatal lancar lancar code_javascript" ></a>

 <a href="#"><img  src="banner2.jpg" border="0" / alt="JS kemahiran pelaksanaan kesan tatal lancar lancar code_javascript" ></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:

scrollLeft 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, dan 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 setelah 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 mencapai penyembunyian bayang. 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.

Kod pelaksanaan kesan tatal lancar dan lancar JS di atas ialah semua kandungan yang dikongsi oleh editor. Saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.