ahaoxie's blog

<script type="text/javascript">
var marqueeContent=new Array();   //滚动新闻的内容
marqueeContent[0]='14:25 <a href=http://hi.eedu.org.cn
target=_blank class="f12red">news1……</a><br>';
marqueeContent[1]='14:25 <a href=http://hi.eedu.org.cn
target=_blank class="f12red">news2……</a><br>';
marqueeContent[2]='14:25 <a href=http://hi.eedu.org.cn
target=_blank class="f12red">news3……</a><br>';
marqueeContent[3]='14:25 <a href=http://hi.eedu.org.cn
target=_blank class="f12red">news4……</a><br>';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
var marqueeBox;//用来存放滚动新闻的容器元素
//接下来的是定义一些要使用到的函数
//1.初始化滚动新闻
function initMarquee() {
//初始化str为新闻0
var str=marqueeContent[0];
//写HTML
document.write('<div id="marqueeBox" style="overflow:hidden;height:'
+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" 
onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'
+str+'</div></div>');
//用于切换新闻内容到1
marqueeId++;
//2.定期调用startMarquee，存于marqueeInterval[0]中
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
//2.开始滚动新闻
function startMarquee(){
marqueeBox = document.getElementById("marqueeBox");
//更新新闻内容到str
var str=marqueeContent[marqueeId];
//新闻切换
marqueeId++;
//切换到头则返回新闻0
if(marqueeId>=marqueeContent.length) marqueeId=0;
//如果marqueeBox只有一个子结点（第一次运行这个函数的时候是true）
if(marqueeBox.childNodes.length==1) {
//创建一个div并且将其内容设置为str
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
} else {//否则的话，（第一次运行本函数之后都运行这个分支）
marqueeBox.childNodes[0].innerHTML=str;
//重点语句，将第一个元素颠倒到第二个
marqueeBox.appendChild(marqueeBox.childNodes[0]);
//让元素看起来像滚动的效果，初始为0
marqueeBox.scrollTop=0;
}
//3.滚动效果、20毫秒延时
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
//3.滚动效果
function scrollMarquee(){
//开始滚动。
marqueeBox.scrollTop++;
//如果滚到头了，停止滚动
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
//1.代码开始
initMarquee();
</script>