Das Beispiel in diesem Artikel erklärt den Code von Javascript, um ein nahtloses Auf- und Abwärtsscrollen zu erreichen, und teilt ihn als Referenz mit allen. Der spezifische Inhalt ist wie folgt.
Das Prinzip von js, um ein nahtloses Scrollen nach oben und unten zu erreichen ist wie folgt:
1. Stellen Sie zuerst die Höhe oder Breite des Containers ein, dann overflow:hidden;
2. Nachdem die Containerhöhe festgelegt wurde, wird der Inhalt ausgeblendet, wenn er diese überschreitet.
3. Ändern Sie den Wert des scrollTop-Attributs (nach oben und unten scrollen), um den Inhalt um einen Knoten nach oben und unten zu verschieben (das Prinzip des Scrollens).
4. Wenn die Scroll-Höhe scrollTop größer oder gleich der Höhe des zu scrollenden Knotens ist, setzen Sie scrollTop = 0, verschieben Sie den ersten Knoten im untergeordneten Knotenbaum an das Ende und starten Sie den Scroll-Effekt neu erscheinen.
Die Darstellung ist wie folgt:
Der Code lautet wie folgt:
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
