简明现代魔法 -> JavaScript -> JavaScript 滚动文字

JavaScript 滚动文字

2010-01-28

JavaScript 实现的滚动文字

程序代码

<style type="text/css" >
    li{color: #006699;font-size:12px; margin-top:3px; margin-left:0px}
    ul{ padding-left:0px; padding-top:1px; margin-left:20px}
</style>

<div id="marquees" style="width:210px; margin-top:10px"> 
<!-- 这些是字幕的内容,你可以任意定义 -->
<ul>
<li title="文字1"><a href="">文字1</a></li>
<li title="文字1"><a href="">文字2</a></li>
<li title="文字3"><a href="">文字3</a></li>
<li title="文字4"><a href="">文字4</a></li>
<li title="文字5"><a href="">文字5</a></li>
<li title="文字6"><a href="">文字6</a></li> 
<li title="文字7"><a href="">文字7</a></li>
<li title="文字8"><a href="">文字8</a></li>
<li title="文字9"><a href="">文字9</a></li>
</ul>

</div> 
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
	marqueesHeight=103; //内容区高度
	stopscroll=false; //这个变量控制是否停止滚动
	with(marquees)
	{
		noWrap=false; //这句表内容区不自动换行
		style.width=210; //于是我们可以将它的宽度设为0,因为它会被撑大
		style.height=marqueesHeight;
		style.overflowY="hidden"; //滚动条不可见
		onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
		onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
	}
	//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
	document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
	function init()
	{ 	//初始化滚动内容
		//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
		while(templayer.offsetHeight<marqueesHeight)
		{
			templayer.innerHTML+=marquees.innerHTML;
		} 
		//把"templayer"的内容的“两倍”复制回原内容区:
		marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
		//设置连续超时,调用"scrollUp()"函数驱动滚动条:
		setInterval("scrollUp()",100);
	}
	document.body.onload=init;
	preTop=0; //这个变量用于判断滚动条是否已经到了尽头
	function scrollUp()
	{ 	
		//滚动条的驱动函数
		if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动 
		preTop=marquees.scrollTop; //记录滚动前的滚动条位置
		marquees.scrollTop+=1; //滚动条向下移动一个像素
		//如果滚动条不动了,则向上滚动到和当前画面一样的位置
		//当然不仅如此,同样还要向下滚动一个像素(+1):
		if(preTop==marquees.scrollTop)
		{
			marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
		}
	}
-->
</script>  

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们