实例一：无缝滚动，鼠标放上暂停
内容的offsetHeight小于容器的高度时,scrollTop就没有用.
多复制几遍或多加几空行就可以了.

 

实例二：跑马灯 文字一行一行地向上滚动
让项目列表<li>中的文字一行一行地向上滚动:

关键代码分析:

<div id="limrq" style="overflow:hidden;height:20px;line-height:22px;"></div>

overflow:hidden;隐藏超出高度20px的部分.
height:20px;容器高度.
line-height:22px;固定行高.

<script type="text/javascript">
var mrqInterval=new Object;
var mrqn;
var limrq=document.getElementById("limrq");
var lml=limrq.getElementsByTagName("li").length;
function liMarquee(){
    limrq.scrollTop++;
    if(limrq.scrollTop%22==0){
        clearInterval(mrqInterval[0]);
        }
    }
function nxtmrq(){
    if(mrqn<lml){
        mrqInterval[0]=window.setInterval("liMarquee()",20);
        mrqn++;
        }
    else{
        limrq.scrollTop=0;
        mrqn=0;
        nxtmrq();
        }
    }
function intimrq(){
    limrq.scrollTop=0;
    mrqn=0;
    mrqInterval[1]="";
    clearInterval(mrqInterval[1]);
    mrqInterval[1]=window.setInterval("nxtmrq()",2000);
    }
limrq.innerHTML+="<li>"+limrq.getElementsByTagName("li")[0].innerHTML+"</li>";
limrq.onmouseover=function(){
    clearInterval(mrqInterval[1]);
    }
limrq.onmouseout=function(){
    mrqInterval[1]=window.setInterval("nxtmrq()",2000);
    }
window.onload=intimrq;
</script>

var lml=limrq.getElementsByTagName("li").length;//先读取项目数量.
limrq.innerHTML+="<li>"+limrq.getElementsByTagName("li")[0].innerHTML+"</li>";//把第一个项目追加到容器里作为环接点.
作者：Cary
 

〖常用代码〗Tags: 无缝滚动

所属专题：JS代码