实例一：无缝滚动，鼠标放上暂停

内容的offsetHeight小于容器的高度时,scrollTop就没有用.

多复制几遍或多加几空行就可以了.

<div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">

<div id="demo1">

标准之路——DIV+CSS教程,网而布局,web2.0,常用代码,水晶图标,幻灯图片

</div>

<div id="demo2"></div>

</div>

<script language="javascript" type="text/javascript">

<!--

var demo = document.getElementById("demo");

var demo1 = document.getElementById("demo1");

var demo2 = document.getElementById("demo2");

var speed=10; //滚动速度值，值越大速度越慢

var nnn=200/demo1.offsetHeight;

for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML}

demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时

demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端

else{

demo.scrollTop++

}

}

var MyMar = setInterval(Marquee,speed); //设置定时器

demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的

demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器

-->

</script>

实例二：跑马灯 文字一行一行地向上滚动

让项目列表<li>中的文字一行一行地向上滚动:

<div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">

<div id="demo1">

标准之路——DIV+CSS教程,网而布局,web2.0,常用代码,水晶图标,幻灯图片

</div>

<div id="demo2"></div>

</div>

<script language="javascript" type="text/javascript">

<!--

var demo = document.getElementById("demo");

var demo1 = document.getElementById("demo1");

var demo2 = document.getElementById("demo2");

var speed=10; //滚动速度值，值越大速度越慢

var nnn=200/demo1.offsetHeight;

for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML}

demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时

demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端

else{

demo.scrollTop++

}

}

var MyMar = setInterval(Marquee,speed); //设置定时器

demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的

demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器

-->

</script>

关键代码分析:

<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>";//把第一个项目追加到容器里作为环接点.