JS Special effects code: To achieve intermittent seamless text scrolling effects

The most common way to handle intermittent, seamless scrolling of news on a page is to append a copy of the scrolling area content to the scrolling stop effect by controlling and judging the scrolltop of the scroll block.

In fact, in many cases, it is easier to achieve intermittent seamless scrolling through node operations.

The code is as follows:

<script language= "javascript" type= "Text/javascript" >
Window.onload=function () {
var O=document.getelementbyid (' box ');
Window.setinterval (function () {Scrollup (o,24,0);},3000);
}
Scroll Main method
Parameters: O Scroll Block Object
Parameters: D per roll screen height
Parameter: C Current scroll height
function Scrollup (o,d,c) {
if (d==c) {
var t=getfirstchild (o.firstchild). CloneNode (True);
O.removechild (Getfirstchild (o.firstchild));
O.appendchild (t);
t.style.margintop= "0px";
}else{
c+=2;
Getfirstchild (o.firstchild). style.margintop=-c+ "px";
Window.settimeout (function () {Scrollup (o,d,c)},20);
}
}
Solve the problem of Firefox will be a space carriage return as a node
function Getfirstchild (node) {
while (node.nodetype!=1)
{
node=node.nextsibling;
}
return node;
}
</script>
<ul id= "box" >
<li> Xinhua Daily Telegraph: Music copyright charges like "a group of hemp" </li>
<li> Modern Express: Can humans marry robots and have children? </li>
<li> Global: The bankruptcy of a billionaire's club in America </li>
<li> Modern Express: For the media to seal Nuzhen want to sell Michelle Reis love letter </li>
<li> Beijing Air and Space University student self-propelled rocket ascension </li>
</ul>

Effect:

Run Code Box
<style type= "Text/css" > <!--*{margin:0px; padding:0px;} #box {width:300px; height:24px;overflow:hidden; font-size:12px; Background: #efefef;} #box li{list-style:none line-height:24px}--> </style> <script language= "JavaScript type=" text/ JavaScript "> Window.onload=function () {var o=document.getelementbyid (' box '); Window.setinterval (function () { Scrollup (o,24,0);},3000); } function Scrollup (o,d,c) {if (d==c) {var t=getfirstchild (o.firstchild). CloneNode (True); O.removechild (Getfirstchild (O.firstchild)); O.appendchild (t); t.style.margintop= "0px"; }else{c+=2 getfirstchild (o.firstchild) style.margintop=-c+ "px" window.settimeout (function () {Scrollup (o,d,c)}, 20); } function Getfirstchild (node) {while (node.nodetype!=1) {node=node.nextsibling} return node;} </script> <u L id= "box" > <li> Xinhua Daily Telegraph: Music copyright charges like "a group of hemp" </li> <li> Modern Express: Can humans marry robots and have children? </li> <li> Global: Bankruptcy </li> <li> of a billionaire club in the United States Modern Express: In order to let the media seal Nuzhen to sell Michelle Reis love letter </li&Gt <li> Beijing Air and Space University student self-propelled rocket ascension </li> </ul>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]