﻿var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=18;
var marqueeBox;//用来存放滚动新闻的容器元素

//接下来的是定义一些要使用到的函数
//1.初始化滚动新闻
function initMarquee(marqueeContent) {
    //初始化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();

