Javascript 实现连续可停止 滚动字幕

前几天要实现一个滚动字幕，先用Marquee标签控制元素的滚动发现到每滚完一幕，就会出现一次空白，不能满足需求，上网找了下没有其他控件可以用，就用js实现了个可以连续滚动的字幕。滚动速度，时间间隔，滚动去高度等都可以方便的配置，内容可以从数据库中读取来填充。

首先显示区的高度是小于内容的高度，不然要滚动就没有意义了（废话） 为了连续滚动不间断，原始的内容是不够的，所以初始化滚动方法的时候克隆了内接在原始内容下面，同时设置了超出现实区部分的内容隐藏，这样滚动的一屏内容的时候就不会出现空白，再在克隆内容显示完之前重新设置显示内容的高度，又从头开始显示，如此循环实现连续滚动，再通过时间控制函数来来控制滚动效果等，这个功能就是先了，具体细节代码中有写注释。

参考：http://www.mingblog.com/article-1679.html

代码：

<style type="text/css">



* {font-size:12px;font-family:Verdana,Tahoma;padding:0;margin:0;}



#scrollStyle{background: #F9F9F9;border: 1px solid #E0E0E0;width:300px;}



</style>



<div id="scrollStyle"><!-- 用来控制下样式，可以去掉 -->

	

<div id="andyscroll">



		<div id="scrollmessage">

		

			 <ul>

		

			 <li><a href="#">测试一些内容一些内容</a>-1</li>

		

			 <li><a href="#">测试一些内容一些内容</a>-2</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-3</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-4</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-5</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-6</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-7</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-8</li>

			 

			 <li><a href="#">测试一些内容一些内容</a>-9</li>

		

			 </ul>

		

		</div>



</div>



</div>



<script type="text/javascript">



<!--



var TIME_INTERVAL = 1000;// 滚动停止 时间间隔（毫秒）



var SCROLL_INTERVAL = 40;// 移动一个像素的时间间隔（毫秒）



var SCROLL_DISTANCE = 16;// 每次滚动距离（像素）



var SCROLL_HEIGHT = 32// 显示区高度，最好是SCROLL_DISTANCE的整数倍，不至于滚出半行



var stopscroll	= false;// 用于鼠事件，判断是否停止滚动



var intervalObject; // 时间停止对象



var andyscrollHeght = 0;



var scrollElem = document.getElementById("andyscroll");



init_srolltext();



/**

 * 滚动区初始化

 */	

function init_srolltext(){

	try{

	

		 with(scrollElem){

	

				 style.overflow	 = 'hidden';// 设置内容超过滚动区隐藏

			

				 noWrap = true;

				 

		 }

		 

		 scrollElem.style.height  = SCROLL_HEIGHT;// 设置滚动区高度

		 

		 scrollElem.onmouseover = new Function('stopscroll = true');// 设置鼠标事件

	

		 scrollElem.onmouseout = new Function('stopscroll = false');// 设置鼠标事件

	

		 andyscrollHeght = scrollElem.scrollHeight;

	

		 var leftElem = document.getElementById("scrollmessage");

	

		 scrollElem.appendChild(leftElem.cloneNode(true));// 拷贝一个内容接在原始内容上，用于无缝滚动

		 

		 scrollElem.scrollTop = 0;// 初始化开始滚动的高度

		 

		 begain_srolltext();//开始滚动

	

	}catch(e){}

}



/**

 * 开始滚动

 */		 

function begain_srolltext(){

	 intervalObject = setInterval('scrollUp()', SCROLL_INTERVAL);

}



/**

 * 向上滚动操作

 */		        

function scrollUp(){

	

	if(stopscroll)return;// 如果鼠标在上面，不滚动

	

	scrollElem.scrollTop += 1;

	

	/**

	 * 如果滚动区的高度和当前的顶端相等，则重置滚动内容的高度

	 * 实现无缝的滚动

	 */

	if(scrollElem.scrollTop == andyscrollHeght){

		

			scrollElem.scrollTop = 0;

			

	}

	

	/**

	 * 滚动一段距离SCROLL_DISTANCE后停止一段时间TIME_INTERVAL重新开始滚动

	 */

	if((scrollElem.scrollTop)%SCROLL_DISTANCE == 0){

		

		clearInterval(intervalObject);

		

		setTimeout("begain_srolltext()",TIME_INTERVAL);

		

	}

	

}



//-->



</script>