html里的marqueen也能实现内容的滚动，但滚动是间断的，在滚动一个周期中，会有一段空白出现。如果滚动的区域比较大，空间的出现，会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观，实现无间断的滚动。

上下循环滚动代码：

复制代码 代码如下:

<div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)">

<div id="demo1">

111111111111111<br>

222222222222222<br>

333333333333333<br>

444444444444444<br>

555555555555555

</div>

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

</div>

<script>

var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");

var inter;

t2.innerHTML=t1.innerHTML;

function qswhMarquee(){

if(t2.offsetTop<=t.scrollTop)

t.scrollTop-=t1.offsetHeight;

else

t.scrollTop++;

}

inter=setInterval(qswhMarquee,30);

function getid(id){

return document.getElementById(id);

}

</script>

文字左右循环滚动代码：

复制代码 代码如下:

<style type="text/css" media="all">

.d1{

margin:10px auto;

width:200px;

background-color:#CCCCCC;

height:20px;

overflow:hidden;

white-space:nowrap;

}

.d2{

margin:0px auto;

background-color:#FF9933;

}

.div2{

width:auto;

height:20px;

font-size:12px;

}

</style>

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

var s,s2,s3,s4,timer,i=0;

function init(){

s=getid("div1");

s2=getid("div2");

s3=getid("div3");

s4=getid("div4");

s4.innerHTML=s3.innerHTML;

s2.style.width=s.offsetWidth+"px";

s2.style.height=s.offsetHeight+"px";

timer=setInterval(mar,30)

}

function mar(){

//s2.innerHTML=s.scrollLeft;

if(s3.offsetWidth<=s.scrollLeft){

s.scrollLeft-=s3.offsetWidth;

}else{s.scrollLeft++;}

}

function getid(id){

return document.getElementById(id);

}

window.onload=init;

</script>

<div id="div1">

<span id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span>

<span id="div4"></span>

</div>

<div id="div2"></div>