以前在一些网站的公告上看到一些滚动的文字或公告，即是文字一行一行的滚动，滚动一行，停止一下，滚动一行，停止一下。后来研究了n久，发现是这个属性控制的scrolltop。

只要改变div的这个属性值就能控制div中内容的滚动了，不过前提就是必须要div中的内容有溢出，然后属性改为overflow：hidden。一下是我写的一个滚动微博的js代码：

文章来源www.chaochaoblog.com

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="weiboFrame" style="width:187px; height:50px; overflow:hidden; font-size:12px; font-family:'宋体';">
</div>
<script language="javascript">
var weiboNum=5;
var weiboText=new Array(5);
var weiboHeight=50;
var weiboScrollNum=0;
var weiboScrollState=0;
var weiboToScroll='weiboText0';
var timeId;
var timeId2;
weiboText[0]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText0"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">终于弄明白了腾讯微博sdk的使用了。正在开发一个wordpress的插件。www.chaochaoblog.com.</span>  <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 手机(t.3g.qq.com)-</span></div></li>';
weiboText[1]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText1"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">最近的天气让人觉的很沉重，早晨起来放fafsafdsafdsfdsafdsafdsafdsfafdsafsdfsdafdsafdsafdsafdasfsdafsafdsafsadffdsafdsaf在凳子上的衣服都湿了</span>  <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 手机(t.3g.qq.com)-</span></div></li>';
weiboText[2]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden;" id="weiboText2"><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾讯微afdsafdsafafsdafdsagfadsfdsafsdafdsafdsafdsafsdafdsafdasfsda博的api到底怎么333用么</span>  <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>';
weiboText[3]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden; id="weiboText3""><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾dafdsafdsafdsafdsfsdafdasfdsafdsafdsa讯微博的api到底怎么用444么</span>  <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>';
weiboText[4]='<li><div class="microblog" style="width:187px;height:50px; overflow:hidden; id="weiboText4""><a href="http://t.qq.com/yangchaoliuyang" rel="external nofollow" title="来自腾讯微博" target="_blank"><img class="microblog-ico" style="float:left;padding-right:3px;" alt="腾讯微博" src="http://www.chaochaoblog.com/wp-content/plugins/qq-microblog/txwb.gif" /></a><span class="microblog-content">@sjolzy 你好 能请教一下腾讯afdsafdsafdsfdsfdsfdsafdsafsafafafasfas微博的api到底怎么555用么</span>  <span class="microblog-from" style="font-style:italic;">-2011/03/21 来自 网页-</span></div></li>';

for(i=0;i<weiboNum;i++)
{
	document.getElementById('weiboFrame').innerHTML+=weiboText[i];
	
}
function scrollWeiboText()
{
	
	if(weiboHeight>0)
	{
	
			//alert(document.getElementById('weiboText1').scrollTop);
		if(weiboScrollState==0)
		{
			document.getElementById('weiboFrame').scrollTop+=2;
		}
		else
		{
			document.getElementById('weiboFrame').scrollTop-=2;
		}
		weiboHeight-=2;
	
	}
	else
	{
		weiboHeight=50;
		window.clearInterval(timeId);
		
		
	}
	
}
function scrollInWeiboText()
{
	
	if(weiboHeight>0)
	{
	
		

		document.getElementById(weiboToScroll).scrollTop+=2;
		

		weiboHeight-=2;
		alert(weiboHeight);
	
	}
	else
	{
		weiboHeight=50;
		window.clearInterval(timeId2);
		
		
	}
	
}
function moveDivText()
{
	weiboToScroll='weiboText' + weiboScrollNum;

	timeId2=setInterval(scrollInWeiboText(),10);
}
function moveWeiboText()
{
    if(weiboScrollState==0)
	{
		if(weiboScrollNum<weiboNum-1)
		{
			weiboScrollNum+=1;
	
			timeId=setInterval('scrollWeiboText()',10);
		}
		else
		{
		
			weiboScrollState=1;
		}
	}
	else
	{
		if(weiboScrollNum>0)
		{
			weiboScrollNum-=1;
	
			timeId=setInterval('scrollWeiboText()',10);
		}
		else
		{
			weiboScrollState=0;
		}
	}
	setTimeout('moveDivText()',5000);
}

setInterval('moveWeiboText()',10000);


</script>

如无特别说明，本博客文章皆为原创。转载请说明，来自吵吵博客。

原文链接：http://chaochaoblog.com/archives/159

吵吵微信朋友圈，请付款实名加入：