Kürzlich wollte ich einen rollierenden Nachrichteneffekt implementieren. Ich habe einige Informationen im Internet überprüft und festgestellt, dass es zwei grundlegende Implementierungsmethoden gibt:
1. Verwenden Sie Marquee-Tags. Ich habe einen relativ ausführlichen Artikel über die Verwendung dieses Tags nachgedruckt. Der Nachteil ist, dass die Leute ihn nach und nach nicht mehr unterstützen .0 lose. dtd ist in Ordnung, das Entfernen von lose.dtd jedoch nicht.
2. Verwenden Sie die Methode div+javascript. Der Vorteil dieser Methode besteht darin, dass sie mit fast allen Browsern kompatibel ist und dennoch innerhalb eines vorhersehbaren Zeitraums stabil laufen kann. Und durch die Verwendung von div können Webseiten vorhandene CSS-Ressourcen nutzen, um viele umwerfende Effekte zu erzielen. Der Nachteil besteht darin, dass es eine gewisse Programmiererfahrung und Geduld erfordert.
Das Grundprinzip der Verwendung von Javascript + div ist das gleiche. Verwenden Sie das scrollTop-Attribut und das offsettheight-Attribut, um den Bewegungseffekt zu erzielen. Im Allgemeinen werden zwei Divs verwendet, der Inhalt darin ist derselbe und dann werden die beiden Divs zusammengefügt, um einen Endlosschleifeneffekt zu bilden. Unten sind zwei Beispielcodes, die ich gefunden habe. Der erste ist genau der, den ich verwendet habe, und er funktioniert. Den zweiten habe ich nicht getestet. Ich schreibe dies zum Vergleich. Das zweite Exemplar sollte brauchbar sein, da ich es von der Website genommen habe.
erster Code
Kopieren Sie den Codecode wie folgt:
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="layer2">
<%
ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
for (int i = 1; i < announceList.size() && i < 5; i++) {
String ankündigenArr[] = (String[]) ankündigenList.get(i);
String-Inhalt = AnnounceArr[1];
String date = AnnounceArr[2].substring(AnnounceArr[2].indexOf("-")+1, AnnounceArr[2].indexOf(" "));
%>
<table cellpacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</table>
<table cellpacing="0" cellpadding="0">
<tr>
<td valign="top">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="line-height: 20px;" mce_style="line-height: 20px;">
<%=Inhalt%> <%=Datum%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // Definieren Sie die Höhe des Bildlaufbereichs.100
var iFrame = 1; // Definieren Sie die pro Frame verschobenen Pixel.
var iFrequency = 50; // Definieren Sie die Framefrequenz.
var timer; // Zeithandle definieren.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
anders
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
// alarm(document.getElementById("layer2").innerHTML);
Funktion move(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
anders {
document.getElementById("layer1").scrollTop += iFrame;
}
}
timer = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
zweiter Code
Kopieren Sie den Codecode wie folgt:
<SCRIPT language="JavaScript">
var strArray=new Array();
strArray[1]=''
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Mitteilung zum Sechsten Nationalen Mitgliederkongress und Akademischen Jahrestreffen der Natural Resources Society of China (Nr. 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Seminar-Ausschreibung zum Thema „Theorie, Technologie und Methoden der adaptiven räumlichen Informationsvisualisierung“ (09.04)</a > </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Stellenausschreibung für Buchhaltungspositionen des Instituts für Geographische Wissenschaften und Natürliche Ressourcen der Chinesischen Akademie der Wissenschaften (09.03)< /a></td> </tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
strArray[0]=''
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Vorlesungsreihe des Water Issues Forum – Vorlesung 7 im Jahr 2009 (Vorlesung insgesamt 90) (09.01)</ a> </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Chinese Academy of Sciences Geographic Information Technology Independent Innovation Forum und SuperMap GIS Technology Conference (09.01)</a >< /td></tr></table><table width=43 border=0 cellspace=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<Tabellenbreite=136 Rand=0 Zellenabstand=0 Zellenpadding=0><tr><td Breite=16 Höhe=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">Das State Key Laboratory of Resources and Environmental Information Systems rekrutiert Gastforscher in Richtung „Finite-Elemente-Methode“ im Jahr 2009 (08.07)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<SKRIPT>
Var-Timer;
document.write('<div id="icefable1">'
+'<Tabellenbreite=130; Rand=0 Zellenabstand=0 Zellenpadding=0>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ tr>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ tr>'
+'</table>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopptscroll=false;
icefable1.scrollTop=0;
*/
with(icefable1){
/*
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="versteckt";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
var stoptime=0;
*/
Funktion init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
timer = setInterval("move()",100);
}
Funktion move(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
anders
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
Funktion scrollUp(){
if(stopscroll==true) return;
currentTop+=4;
if(currentTop==132)
{
Stoppzeit+=4;
currentTop-=0;
}
anders {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>