Recently, I want to achieve a rolling news effect. I checked some information online and found that there are two basic implementation methods:
1. Use the Marquee tag.I have reprinted a more detailed article on the use of this tag. The advantage of this tag is that it is easy to use, and the disadvantage is that people are gradually not applicable to it. Many browsers do not support it. Even in IE8, XHTML4.0 is OK, but it cannot be removed.
2. Use div+javascript method.The advantage of this approach is that it is compatible with almost all browsers and can still run stably for expected time. And using div allows web pages to achieve many dazzling effects using existing css resources. The disadvantage is that it requires a certain amount of programming experience and patience.
The basic principle of using javascript+div method is the same, using scrollTop attribute and offsettheight attribute to achieve the movement effect. Generally, two divs are used, and the contents are the same, and then the two divs are spliced to form a continuous cycle effect. Below are two sample codes I found. The first one is the code I used and can run. I didn't do the second test. I wrote it out for a comparison, and the second one should be useful because I took it from the website.
First code
<div style="overflow-y:hidden;width:120;">
<div >
<%
ArrayList announceList = ("select * from sys_announce order by pubdate DESC");
for (int i = 1; i < () && i < 5; i++) {
String announceArr[] = (String[]) (i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
<table cellspacing="0" cellpadding="0" border="0" width="43">
<tr>
<td height="10"/>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="136">
<tr>
<td height="20" width="16" valign="top">
<img height="12" width="12" vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td width="108" style="line-height: 20px;" mce_style="line-height: 20px;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div ></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // Define the height of the scroll area.100
var iFrame = 1; // Defines the pixels that move each frame.
var iFrequency = 50; // Define the frame frequency.
var timer; // Define the time handle.
if(("layer2").offsetHeight >= layerHeight)
("layer1"). = layerHeight;
else
("layer1"). = ("layer2").offsetHeight;
("layer3").innerHTML = ("layer2").innerHTML;
// alert(("layer2").innerHTML);
function move(){
if(("layer1").scrollTop >= ("layer2").offsetHeight){
("layer1").scrollTop -= (("layer2").offsetHeight - iFrame);
}
else {
("layer1").scrollTop += iFrame;
}
}
timer = setInterval("move()",iFrequency);
("layer1").onmouseover=function() {clearInterval(timer);}
("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
Second code
<SCRIPT language="JavaScript">
var strArray=new Array();
strArray[1]=''
+'<table width=136 border=0 cellpacing=0 cellpading=0 cellpadding=0><tr><td width=16 height=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 title="Notice of the Sixth National Members' Congress and Academic Annual Meeting of the Chinese Society of Natural Resources (No. 2) (09.10)" target="_blank" href="moban/?id=10560" mce_href="moban/?id=10560">Notice of the Sixth National Members' Congress and Academic Annual Meeting of the Chinese Society of Natural Resources (No. 2) (09.10)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpading=0 cellpadding=0><tr><td width=16 height=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 title=""Adaptive spatial information visualization theory, technology and method" seminar (09.04)" target="_blank" href="moban/?id=10557" mce_href="moban/?id=10557">Essay contest for "Adaptive spatial information visualization theory, technology and methods" seminar (09.04)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpading=0 cellpadding=0><tr><td width=16 height=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 title="Recruitment Notice for Accounting Positions of the Institute of Geographical Sciences and Resources, Chinese Academy of Sciences (09.03)" target="_blank" href="moban/?id=10556" mce_href="moban/?id=10556">Recruitment notice for accounting positions in the Institute of Geographical Sciences and Resources, Chinese Academy of Sciences (09.03)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellpacing=0 cellpading=0 cellpadding=0><tr><td width=16 height=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 title="Water Issues Forum Lecture Series—Lecture 7, 2009 (Lecture 90, 09.01)" target="_blank" href="moban/?id=10554" mce_href="moban/?id=10554">Water Issue Forum Series Lectures—Lecture 7, 2009 (Lecture 90, 2009) (09.01)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0 cellpadding=0><tr><td width=16 height=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 title="2009'Chinese Academy of Sciences' Independent Innovation Forum on Geographic Information Technology and SuperMap GIS Technology Conference (09.01)" target="_blank" href="moban/?id=10553" mce_href="moban/?id=10553">2009'Chinese Academy of Sciences' Geographic Information Technology Independent Innovation Forum and SuperMap GIS Technology Conference (09.01)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpading=0 cellpadding=0><tr><td width=16 height=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 title="The National Key Laboratory of Resources and Environmental Information Systems recruited guest researchers in the "Finance Element Method" direction in 2009 (08.07)" target="_blank" href="moban/?id=10532" mce_href="moban/?id=10532">The National Key Laboratory of Resources and Environmental Information Systems recruited guest researchers in the "finite element method" direction in 2009 (08.07)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=(()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<SCRIPT>
var timer;
('<div style="width:136;">'
+'<table width=130; border=0 cellspacing=0 cellpadding=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 style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopscroll=false;
=0;
*/
with(icefable1){
/*
=0;
=marqueesHeight;
="visible";
="hidden";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
var stoptime=0;
*/
function init_srolltext(){
="";
+=;
=+;
timer = setInterval("move()",100);
}
function move(){
if(("icefable2").scrollTop >= ("icefable1").offsetHeight)
("icefable2").scrollTop -= (("icefable1").offsetHeight - 1);
else
("icefable2").scrollTop += 1;
}
init_srolltext();
function scrollUp(){
if(stopscroll==true) return;
currentTop+=4;
if(currentTop==132)
{
stoptime+=4;
currentTop-=0;
}
else {
preTop=;
+=4;
if(preTop==){
=-marqueesHeight;
+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>