Baru-baru ini, saya ingin menerapkan efek berita bergulir. Saya memeriksa beberapa informasi di Internet dan menemukan bahwa ada dua metode penerapan dasar:
1. Gunakan tag Marquee. Saya telah mencetak ulang artikel yang relatif rinci tentang penggunaan tag ini. Keuntungan dari tag ini adalah mudah digunakan. Kerugiannya adalah orang-orang secara bertahap berhenti menggunakannya. Banyak browser yang tidak mendukungnya .0 loose.dtd tidak masalah, tetapi menghapus loose.dtd tidak.
2. Gunakan metode div+javascript. Kelebihan metode ini adalah kompatibel dengan hampir semua browser dan tetap dapat berjalan secara stabil dalam jangka waktu yang dapat diprediksi. Dan menggunakan div memungkinkan halaman web menggunakan sumber daya css yang ada untuk mencapai banyak efek yang mempesona. Kerugiannya adalah memerlukan pengalaman dan kesabaran pemrograman tertentu.
Prinsip dasar penggunaan javascript+div adalah sama. Gunakan atribut scrollTop dan atribut offsettheight untuk mencapai efek bergerak. Umumnya digunakan dua div, isi di dalamnya sama, kemudian kedua div tersebut disambung untuk membentuk efek loop kontinu. Di bawah ini adalah dua contoh kode yang saya temukan. Yang pertama persis seperti yang saya gunakan dan berfungsi. Saya tidak menguji yang kedua. Saya menulis ini untuk perbandingan. Salinan kedua seharusnya dapat digunakan karena saya mengambilnya dari situs web.
kode pertama
Copy kode kodenya sebagai berikut:
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="lapisan2">
<%
ArrayList mengumumkanList = DBTools.getView("pilih * dari sys_announce pesanan sebelum pubdate DESC");
untuk (int i = 1; i < mengumumkanDaftar.ukuran() && i < 5; i++) {
String mengumumkanArr[] = (String[]) mengumumkanList.get(i);
Konten string = mengumumkanArr[1];
String tanggal = mengumumkanArr[2].substring(announceArr[2].indexOf("-")+1, mengumumkanArr[2].indexOf(" "));
%>
<tabel cellpacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</tabel>
<tabel cellpacing="0" cellpadding="0">
<tr>
<td valign="atas">
<img vspace = "5" valign = "atas" src = "gambar/index_18.gif" mce_src = "gambar/index_18.gif"/>
</td>
<td style="tinggi garis: 20 piksel;" mce_style="tinggi garis: 20 piksel;">
<%=isi%> <%=tanggal%>
</td>
<td></td>
</tr>
</tabel>
<%
}
%>
</div>
<div id="lapisan3"></div>
</div>
<mce:script bahasa="javascript"><!--
var layerHeight = 100; // Tentukan tinggi area gulir.100
var iFrame = 1; // Tentukan piksel yang dipindahkan per frame.
var iFrequency = 50; // Tentukan frekuensi frame.
var timer; // Tentukan pengatur waktu.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
kalau tidak
document.getElementById("layer1").style.height = dokumen.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = dokumen.getElementById("layer2").innerHTML;
// peringatan(document.getElementById("layer2").innerHTML);
fungsi pindah(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
kalau tidak {
dokumen.getElementById("layer1").scrollTop += iFrame;
}
}
timer = setInterval("pindah()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:skrip>
kode kedua
Copy kode kodenya sebagai berikut:
<SCRIPT bahasa="JavaScript">
var strArray=Array baru();
strArray[1]=''
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Pemberitahuan Kongres Anggota Nasional Keenam dan Pertemuan Tahunan Akademik Masyarakat Sumber Daya Alam Tiongkok (No. 2) (09.10 )</a></td></tr></table><lebar tabel=43 batas=0 spasi sel=0 cellpadding=0><tr><td tinggi=6></td></tr></tabel>'
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Seminar Panggilan Makalah tentang "Teori, Teknologi dan Metode Visualisasi Informasi Spasial Adaptif" (09.04)</a > </td></tr></table><lebar tabel=43 batas=0 spasi sel=0 cellpadding=0><tr><td tinggi=6></td></tr></tabel>'
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Pemberitahuan Perekrutan untuk Posisi Akuntansi di Institut Ilmu Geografis dan Sumber Daya Alam, Akademi Ilmu Pengetahuan Tiongkok (09.03)< /a></td> </tr></table><lebar tabel=43 batas=0 spasi sel=0 cellpadding=0><tr><td tinggi=6></td></tr></tabel>'
strArray[0]=''
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Seri Kuliah Forum Isu Air - Kuliah 7 tahun 2009 (total 90 Kuliah) (09.01)</ a> </td></tr></table><lebar tabel=43 batas=0 spasi sel=0 bantalan sel=0><tr><td tinggi=6></td></tr></tabel>'
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">Forum Inovasi Independen Teknologi Informasi Geografis Chinese Academy of Sciences 2009 dan Konferensi Teknologi GIS SuperMap (09.01)</a >< /td></tr></table><lebar tabel=43 batas=0 spasi sel=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<lebar tabel=136 batas=0 spasi sel=0 bantalan sel=0><tr><td lebar=16 tinggi=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" lebar=12 tinggi=12 vspace=5></td><td lebar=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">Laboratorium Utama Negara untuk Sumber Daya dan Sistem Informasi Lingkungan merekrut peneliti tamu ke arah "Metode Elemen Hingga" pada tahun 2009 (08.07 )</a></td></tr></table><lebar tabel=43 batas=0 spasi sel=0 cellpadding=0><tr><td tinggi=6></td></tr></tabel>'
/*
showId=Matematika.lantai(Matematika.acak()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SKRIP>
<SKRIP>
pengatur waktu var;
dokumen.tulis('<div id="icefable1">'
+'<lebar tabel=130; batas=0 spasi sel=0 bantalan sel=0>'
+'<tr><td lebar=130; tinggi=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ tr>'
+'<tr><td lebar=130; tinggi=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ tr>'
+'</tabel>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopcroll=salah;
icefable1.scrollTop=0;
*/
dengan(icefable1){
/*
gaya.lebar=0;
style.height=marqueesHeight;
style.overflowX="terlihat";
style.overflowY="tersembunyi";
noWrap=benar;
*/
onmouseover=fungsi(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
var waktu henti=0;
*/
fungsi init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
pengatur waktu = setInterval("pindah()",100);
}
fungsi pindah(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
kalau tidak
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
fungsi gulir ke atas(){
if(stopscroll==true) kembali;
saat iniTop+=4;
if(saat iniTop==132)
{
waktu berhenti+=4;
saat iniTop-=0;
}
kalau tidak {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SKRIP>