Recently, I wanted to implement a rolling news effect. I checked some information on the Internet and found that there are two basic implementation methods:
1. Use Marquee tags. I have reprinted a relatively detailed article on the use of this tag. The advantage of this tag is that it is easy to use. The disadvantage is that people have gradually stopped using it. Many browsers do not support it. Even in IE8, XHTML4.0 loose. dtd is OK, but removing loose.dtd is not.
2. Use the div+javascript method. The advantage of this method is that it is compatible with almost all browsers and can still run stably within a predictable period of time. And using div allows web pages to use existing css resources to achieve many dazzling effects. The disadvantage is that it requires certain programming experience and patience.
The basic principle of using javascript+div is the same. Use the scrollTop attribute and offsettheight attribute to achieve the moving effect. Generally, two divs are used, the content inside is the same, and then the two divs are spliced to form a continuous loop effect. Below are two sample codes I found. The first one is exactly what I used and it works. I didn't test the second one. I am writing this for comparison. The second copy should be usable because I took it from the website.
first code
Copy the code code as follows:
<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 announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
<table cellspacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</table>
<table cellspacing="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;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // Define the height of the scroll area.100
var iFrame = 1; // Define the pixels moved per frame.
var iFrequency = 50; // Define the frame frequency.
var timer; // Define time handle.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
else
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
// alert(document.getElementById("layer2").innerHTML);
function move(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
else {
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>
second code
Copy the code code as follows:
<SCRIPT language="JavaScript">
var strArray=new Array();
strArray[1]=''
+'<table width=136 border=0 cellspacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Notice of the Sixth National Member Congress and Academic Annual Meeting of the Natural Resources Society of China (No. 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Seminar Call for Papers on "Adaptive Spatial Information Visualization Theory, Technology and Methods" (09.04)</a> </td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Recruitment Notice for Accounting Positions of the Institute of Geographic Sciences and Natural Resources, Chinese Academy of Sciences (09.03)</a></td> </tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellspacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Water Issues Forum Lecture Series - Lecture 7 in 2009 (Lecture 90 in total) (09.01)</ a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=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 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 and SuperMap GIS Technology Conference (09.01)</a>< /td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">The State Key Laboratory of Resources and Environmental Information Systems is recruiting guest researchers in the direction of "Finite Element Method" in 2009 (08.07 )</a></td></tr></table><table width=43 border=0 cellspacing=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>
<SCRIPT>
var timer;
document.write('<div id="icefable1">'
+'<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 id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopscroll=false;
icefable1.scrollTop=0;
*/
with(icefable1){
/*
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="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(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
timer = setInterval("move()",100);
}
function move(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
else
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
function scrollUp(){
if(stopscroll==true) return;
currentTop+=4;
if(currentTop==132)
{
stoptime+=4;
currentTop-=0;
}
else {
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>