Javascript轮显效果

来源:互联网 发布:java 日期转换字符串 编辑:程序博客网 时间:2024/04/26 12:36

 <script langauge="javascript">
/**
*@Description:Javascript 轮显效果
*/
var myContent=new Array();
myContent[0] = '<font color=#BC2931><strong> 美国虚拟主机:让您的网站在全球快速打开</strong></font>';
myContent[1] = '<font color=#235E32><strong> 企业全球邮:让您真正实现全球收发邮件畅通无阻</strong></font>';
myContent[2] = '<font color=#BC2931><strong> 美国服务器:全美六大顶级数据中心</strong></font>';

var marqueeDelay=3000;//控制轮换显示时间,单位毫秒
var scrollTime=20;//控制滚动速度,单位毫秒
var marqueeHeight=15;//显示区域的高度,单位px
var intervalId=new Array(2);
var indexId=0;

var marqueeDiv=null;

function initMarquee()//初始化
{
document.write('<div id="marqueeDiv" style="overflow:hidden;height:'+marqueeHeight+'px;cursor:hand" onmouseover="clearInterval(intervalId[0])" onmouseout="intervalId[0]=setInterval(/'startMarquee()/',marqueeDelay)"><div>Loading...</div></div>');
marqueeDiv=document.getElementById("marqueeDiv");
intervalId[0]=setInterval("startMarquee()",marqueeDelay);
}

function startMarquee() //轮显
{
marqueeDiv.scrollTop=0;
marqueeDiv.childNodes[0].innerHTML=myContent[indexId];
indexId++;
if(indexId==myContent.length) indexId=0;
if(marqueeDiv.childNodes[1]==null)
{
var tempDiv=document.createElement("DIV");
tempDiv.innerHTML=myContent[indexId];
marqueeDiv.appendChild(tempDiv);
}
else
marqueeDiv.childNodes[1].innerHTML=myContent[indexId];
if(intervalId[1]==null)
intervalId[1]=setInterval("scrollMarquee()",scrollTime);
}

function scrollMarquee() //滚动
{
marqueeDiv.scrollTop++;
if(marqueeHeight==marqueeDiv.scrollTop && intervalId[1]!=null)
clearInterval(intervalId[1]);
}

initMarquee();
</script>

原创粉丝点击