Using JavaScript to achieve news scrolling effect (example code)

Using JavaScript to achieve news scrolling effect (example code)_javascript skills

WBOY

Release： 2016-05-16 17:12:24

Original

1160 people have browsed it

I recently 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's loose.dtd is OK, but removing loose.dtd is not.

2. Use div javascript method. The advantage of this method is that it is compatible with almost all browsers and can still run stably within a foreseeable 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 code The code is as follows:

<%
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(" "));
%>

<%=content%> <%=date%>

<%
}
%>

iFrame = 1; // Define the pixels moved in each frame.
var iFrequency = 50; // Define the frame frequency.
var timer; // Define the time handle. layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight; . getElementById ("layer2").offsetHeight; innerHTML);
function move(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document .getElementById("layer1 ").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
                                                                                                                                                 rollTop = iFrame;

         }
          timer = setInterval("move()",iFrequency); document.getElementById ("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}

// -->

Second code

Copy code

The code is as follows:

<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>'); /* 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>