window.setTimeout(Javascript学习,N);//新闻滚动

记得最初学网页制作是用的是DreamweaverMX2004,当时MX 2004已是非常流行了，不过再一次上课时老师讲到利用Dreamweaver可以做动画时，在MX里找了半天也没找到制作动画的菜单。最后发现原来这项功能在Dreamweaver 4里是有的，可是在MX中就不知道为什么给去掉了。不过在当时感到是很神奇的，什么时间轴、贞、路径，这些概念也是那里开始接触，可能直到学习了Fireworks和Flash之后才真正明白这些概念。

当时对于HTML语言还没有系统的学习过，也就没有查看原代码，不过对于网页中加入动画还是印象深刻。以后上网接触多了感到，可以用Javascript脚本写出这样的效果。

首先想到的是新浪体育中的图片滚动，不过查看原代码发现其实并不是纯Javascript脚本，他引用了ActiveX或是Applet。而对于这两种技术，用户是有些不放心的。比如在经历过几次ActiveX流氓插件困扰后，我的浏览器是禁止ActiveX和Applet的。于是脑子里萌发了一个用Javascript脚本写出这样一个效果的程序。

要实现脚本的动画效果window.setTimeout(fn,delay)这个方法必不可少。它实现每隔delay毫秒的时间调用fn函数。
HTML: 

< div  id ="notes" >         
     < h5  class ="header" > 最新公告 </ h5 >
                   < DIV  id ="board" >
     < div  id ="news" >
     < div > 第一条新闻。 </ div >
     < div > Hello,world! </ div >
     < div > Javascript 滚动新闻! </ div >
     </ div > <!--  End news  -->

     < div  id ="bar" >< span > 1 </ span >< span > 2 </ span ></ div >
     </ DIV > <!--  End board -->
</ div > <!--  End notes -->

 

CSS:

#board {width:184px;height:156;padding:0 2;overflow:hidden;}
#news {position:relative;font-size:12px;width:180;height:140;overflow:hidden;background-color:#FFFFFF;}
#news div {overflow:hidden;position:absolute;top:140;padding:2 2;}
#bar {border-top:1px dotted #CCC;border-bottom:1px solid #F0F0F0;
text-align:right;padding-right:4px;height:10px;}
#bar span {font-size:10px;cursor:hand;width:16px;height:12px;margin:2;text-align:center;}

Javascript:

var  ctrl = ... {
    TID:null,
    curid:0,
    SCR_TOP:140,
    count:document.getElementById("news").childNodes.length,
    notes:new Array(this.count),
    start:function()
    ...{
        var str="";
        for(var i=0;i<this.count;i++)
        ...{
            var temp=new note(i);
            temp.setLink((i+1)%this.count);
            str+="<span οnclick='doChange("+i+")'>"+(i+1)+"</span>";
            this.notes[i]=temp;
        }
        document.getElementById("bar").innerHTML=str;
        
        var cur=this.notes[this.curid];
        cur.obj.pixelTop=0;
        scroll();
    },
    setNext:function(i)
    ...{
        if(this.setNext.arguments==0)return;
        var ci=this.notes[this.curid];
        var k=ci.nids;
        if(k==i)return;
        var ni=this.notes[k];
        ni.setNext(i);
        ni.delay=ni.interval;
    }
} ;

function  note(i)
... {
    this.ids=i;
    this.obj=document.getElementById("news").childNodes.item(this.ids).style;
    this.obj.pixelTop=ctrl.SCR_TOP;
    this.interval=100;
    this.delay=3000;
    this.speed=10;
    this.nids=i;
    this.nextid=i;
    this.moveable=function()
    ...{
        if(this.obj.pixelTop>-ctrl.SCR_TOP)return true;
        else return false;
    }
    this.move=function()
    ...{
        this.obj.pixelTop-=this.speed;
    }
    this.display=function()
    ...{
        if(this.delay>0)
        ...{
            this.delay-=this.interval;
            var t
            return true;
        }
        else return false;
    }
    this.setNext=function()
    ...{
        var args=this.setNext.arguments;
        if(args.length>0)this.nids=args[0];
        else alert("Error Argument!");
    }
    this.setLink=function(nl)
    ...{
        this.nextid=nl;
        this.nids=nl;
    }
    this.reset=function()
    ...{
        this.speed=10;
        this.obj.pixelTop=ctrl.SCR_TOP;
        this.delay=3000;
        this.nids=this.nextid;
    }
}

function  scroll()
... {
    var ids=ctrl.curid;
    var cur=ctrl.notes[ids];
    var nid=cur.nids;
    var nxt=ctrl.notes[nid];
    if(cur.moveable())
    ...{
        cur.move();
        nxt.move();
    }
    else
    ...{
        if(!nxt.display())
        ...{
            var t=new button(nid);
            t.setNormal();
            t=new button(nxt.nids);
            t.setActive();
            ctrl.curid=nid;
            cur.reset();
        }
        else
        ...{
            var t=new button(nid);
            t.setActive();
        }
    }
    ctrl.TID=window.setTimeout("scroll()",cur.interval);
}

function  button(i)
... {
    this.bt=i;
    this.btn=document.getElementById("bar").childNodes.item(this.bt).style;
    this.setActive=function()
    ...{
        this.btn.cssText="background:#CCCCCC url(../images/arowh.gif) no-repeat left center;color:#FFFFFF;font-weight:bold;";
    }
    this.setNormal=function()
    ...{
        this.btn.cssText="background:#FFFFFFurl(../images/arowh.gif) no-repeat left center;color:gray;font-weight:normal;";
    }
}


function  doChange(i)
... {
    ctrl.setNext(i);
}
ctrl.start();