Using JavaScript to achieve the effect of of instance of the news scrolling code
- 2020-03-29 23:59:37
- OfStack
Recently to achieve a rolling news effect, looked up some information on the Internet, found that there are two basic implementation methods:
2. The method of using div+javascript. The advantage of this approach is that it is compatible with almost all browsers and works reliably for a predictable period of time. And the use of divs makes it possible to achieve a lot of visual effects with existing CSS resources. The downside is that it requires some programming experience and patience.
The basic principle of using javascript+div is the same, using the scrollTop property and the offsetheight property to achieve the move effect. Generally use two divs, inside the content is the same, and then use two divs splicing, forming a continuous loop effect. Here are two examples of the code I found. The first is the code I used, and it works. I didn't do the second test. I wrote it for comparison, and the second one should work because I took it off the website.
First code
<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" 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 id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; //Define the height of the scroll area.100
var iFrame = 1; //Defines the pixels to move in each frame.
var iFrequency = 50; //Define the frame frequency.
var timer; //Define the 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
<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 title=" Notice of the sixth national member congress and academic annual meeting of China society of natural resources (no 2 (no.) 09.10 ) " 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 China society of natural resources (no 2 (no.) 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 title=" "Theories, techniques and methods of adaptive spatial information visualization" seminar 09.04 ) " target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557"> "Theories, techniques and methods of adaptive spatial information visualization" seminar 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 title=" Institute of geographical sciences and resources, Chinese academy of sciences 09.03 ) " target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556"> Institute of geographical sciences and 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 title=" Water forum lecture series -- 2009 In the first 7 Speak (total first 90 (tell) 09.01 ) " target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554"> Water forum lecture series -- 2009 In the first 7 Speak (total first 90 (tell) 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 title="2009' Independent innovation forum of geographic information technology of Chinese academy of sciences SuperMap GIS Technical conference ( 09.01 ) " target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Independent innovation forum of geographic information technology of Chinese academy of sciences SuperMap GIS Technical 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 title=" State key laboratory of resource and environmental information systems 2009 Guest researcher of finite element method ( 08.07 ) " target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532"> State key laboratory of resource and environmental information systems 2009 Guest researcher of finite element method ( 08.07 ) </a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
</SCRIPT>
<SCRIPT>
var timer;
document.write('<div id="icefable1" 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 id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
with(icefable1){
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
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>