Saat menangani pengguliran berita yang terputus-putus dan mulus pada suatu halaman, metode yang paling umum adalah menyalin dan menambahkan konten area gulir, lalu mengontrol dan menilai scrollTop dari blok gulir untuk mencapai efek penghentian gulir.
Faktanya, dalam banyak kasus lebih mudah untuk mencapai pengguliran mulus yang terputus-putus melalui operasi node.
Kodenya adalah sebagai berikut:
<skrip bahasa="javascript" type="teks/javascript">
jendela.onload=fungsi(){
var o=document.getElementById('kotak');
window.setInterval(fungsi(){gulir(o,24,0);},3000);
}
///Gulir metode utama
///Parameter:o objek blok gulir
///Parameter: d Ketinggian setiap gulungan
///Parameter: c tinggi gulir saat ini
fungsi gulir(o,d,c){
jika(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}kalau tidak{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(fungsi(){scrollup(o,d,c)},20);
}
}
//Selesaikan masalah spasi dan gerbong yang akan digunakan sebagai node di Firefox
fungsi getFirstChild(simpul){
sementara (node.nodeType!=1)
{
node=node.saudara berikutnya;
}
simpul kembali;
}
</skrip>
<ul id="kotak">
<li>· Xinhua Daily Telegraph: Biaya hak cipta musik seperti "bola rami" </li>
<li>· Modern Express: Bisakah manusia menikah dengan robot dan punya anak </li>
<li>·Global: Amerika, kebangkrutan klub miliarder</li>
<li>· Modern Express: Untuk membungkam Ni Zhen dari media, dia ingin menjual surat cinta Li Jiaxin</li>
<li>· Beijing Times: Roket buatan mahasiswa Universitas Aeronautika dan Astronautika Beijing naik ke langit</li>
</ul>
Memengaruhi:
menjalankan kode
<gaya tipe="teks/css">
<!--
*{ margin:0 piksel; bantalan:0 piksel;}
#kotak{lebar:300px; tinggi:24px;meluap:tersembunyi; ukuran font:12px; latar belakang:#efefef;}
#box li{ gaya daftar: tidak ada; tinggi garis: 24 piksel;}
-->
</gaya>
<skrip bahasa="javascript" type="teks/javascript">
jendela.onload=fungsi(){
var o=document.getElementById('kotak');
window.setInterval(fungsi(){gulir(o,24,0);},3000);
}
fungsi gulir(o,d,c){
jika(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}kalau tidak{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(fungsi(){scrollup(o,d,c)},20);
}
}
fungsi getFirstChild(simpul){
sementara (node.nodeType!=1)
{
node=node.saudara berikutnya;
}
simpul kembali;
}
</skrip>
<ul id="kotak">
<li>· Xinhua Daily Telegraph: Biaya hak cipta musik seperti "bola rami" </li>
<li>· Modern Express: Bisakah manusia menikah dengan robot dan punya anak </li>
<li>·Global: Amerika, kebangkrutan klub miliarder</li>
<li>· Modern Express: Untuk membungkam Ni Zhen dari media, dia ingin menjual surat cinta Li Jiaxin</li>
<li>· Beijing Times: Roket buatan mahasiswa Universitas Aeronautika dan Astronautika Beijing naik ke langit</li>
</ul>