Lorsqu'il s'agit d'un défilement continu et intermittent des actualités sur une page, la méthode la plus courante consiste à copier et à ajouter le contenu de la zone de défilement, puis à contrôler et à juger le scrollTop du bloc de défilement pour obtenir l'effet d'arrêt du défilement.
En fait, dans de nombreux cas, il est plus facile d’obtenir un défilement intermittent et transparent des opérations des nœuds.
Le code est le suivant :
<langage de script="javascript" type="text/javascript">
window.onload=fonction(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///Méthode principale de défilement
///Paramètre : o objet bloc de défilement
///Paramètre : d La hauteur de chaque défilement
///Paramètre : c hauteur de défilement actuelle
fonction scrollup(o,d,c){
si(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}autre{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//Résoudre le problème selon lequel les espaces et les retours chariot seront utilisés comme nœuds sous Firefox
fonction getFirstChild (nœud) {
tandis que (node.nodeType!=1)
{
node=node.nextSibling;
}
nœud de retour ;
}
</script>
<ul id="box">
<li>· Xinhua Daily Telegraph : Les frais de droits d'auteur sur la musique sont comme "une boule de chanvre" </li>
<li>· Modern Express : Les humains peuvent-ils épouser des robots et avoir des enfants ? </li>
<li>·Monde : l'Amérique, la faillite d'un club de milliardaires</li>
<li>· Modern Express : Afin de faire taire Ni Zhen des médias, il voulait vendre les lettres d'amour de Li Jiaxin</li>
<li>· Beijing Times : Une fusée fabriquée par les étudiants de l'Université d'aéronautique et d'astronautique de Pékin monte vers le ciel</li>
</ul>
Effet:
exécuter le code
<style type="text/css">
<!--
*{ marge :0px ; remplissage :0px;}
#box{largeur:300px; hauteur:24px;débordement:caché; taille de police:12px fond:#efefef;}
#box li{ style-liste : aucun ; hauteur de ligne : 24px ;}
-->
</style>
<langage de script="javascript" type="text/javascript">
window.onload=fonction(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
fonction scrollup(o,d,c){
si(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}autre{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
fonction getFirstChild (nœud) {
tandis que (node.nodeType!=1)
{
node=node.nextSibling;
}
nœud de retour ;
}
</script>
<ul id="box">
<li>· Xinhua Daily Telegraph : Les frais de droits d'auteur sur la musique sont comme "une boule de chanvre" </li>
<li>· Modern Express : Les humains peuvent-ils épouser des robots et avoir des enfants ? </li>
<li>·Monde : l'Amérique, la faillite d'un club de milliardaires</li>
<li>· Modern Express : Afin de faire taire Ni Zhen des médias, il voulait vendre les lettres d'amour de Li Jiaxin</li>
<li>· Beijing Times : Une fusée fabriquée par les étudiants de l'Université d'aéronautique et d'astronautique de Pékin monte vers le ciel</li>
</ul>