When dealing with intermittent seamless scrolling of news on a page, the most common method is to copy and append the content of the scroll area, and then control and judge the scrollTop of the scroll block to achieve the scroll stop effect.
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
///Parameter:o scroll block object
///Parameter: d The height of each scroll
///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 that spaces and carriage returns will be used as nodes under Firefox
function getFirstChild(node){
while (node.nodeType!=1)
{
node=node.nextSibling;
}
return node;
}
</script>
<ul id="box">
<li>· Xinhua Daily Telegraph: Music copyright fees are like "a ball of hemp" </li>
<li>· Modern Express: Can humans marry robots and have children? </li>
<li>·Global: America, the bankruptcy of a billionaire club</li>
<li>· Modern Express: In order to silence Ni Zhen from the media, he wanted to sell Li Jiaxin’s love letters</li>
<li>· Beijing Times: Beijing University of Aeronautics and Astronautics students’ self-made rocket ascends to the sky</li>
</ul>
Effect:
run code
<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>
<ul id="box">
<li>· Xinhua Daily Telegraph: Music copyright fees are like "a ball of hemp" </li>
<li>· Modern Express: Can humans marry robots and have children? </li>
<li>·Global: America, the bankruptcy of a billionaire club</li>
<li>· Modern Express: In order to silence Ni Zhen from the media, he wanted to sell Li Jiaxin’s love letters</li>
<li>· Beijing Times: Beijing University of Aeronautics and Astronautics students’ self-made rocket ascends to the sky</li>
</ul>