效果图：

实现思路：

首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数，循环段落总字数来实现一个字一个字的输出。

js代码：

    


        


            


                


                

            

            


                

                    var theNewsNum;
                

            

        

        


            


                


                

            

            


                

                    var theAddNum;
                

            

        

        


            


                


                

            

            


                

                    var totalNum;
                

            

        

        


            


                


                

            

            


                

                    var CurrentPosion=0;
                

            

        

        


            


                


                

            

            


                

                    var theCurrentNews;
                

            

        

        


            


                


                

            

            


                

                    var theCurrentLength;
                

            

        

        


            


                


                

            

            


                

                    var theNewsText;
                

            

        

        


            


                


                

            

            


                

                    var theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    var theCharacterTimeout;
                

            

        

        


            


                


                

            

            


                

                    var theNewsTimeout;
                

            

        

        


            


                


                

            

            


                

                    var theBrowserVersion;
                

            

        

        


            


                


                

            

            


                

                    var theWidgetOne;
                

            

        

        


            


                


                

            

            


                

                    var theWidgetTwo;
                

            

        

        


            


                


                

            

            


                

                    var theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    var theLeadString;
                

            

        

        


            


                


                

            

            


                

                    var theNewsState;
                

            

        

        


            


                


                

            

            


                

                    function startTicker(){
                

            

        

        


            


                


                

            

            


                

                    // ------ 设置初始数值
                

            

        

        


            


                


                

            

            


                

                    theCharacterTimeout = 50;//字符间隔时间
                

            

        

        


            


                


                

            

            


                

                    theNewsTimeout = 2000;//新闻间隔时间
                

            

        

        


            


                


                

            

            


                

                    theWidgetOne = "_";//新闻前面下标符1
                

            

        

        


            


                


                

            

            


                

                    theWidgetTwo = "-";//新闻前面下标符
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 1;
                

            

        

        


            


                


                

            

            


                

                    theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新闻总条数
                

            

        

        


            


                


                

            

            


                

                    theAddNum = document.getElementById("incoming").children.AddNews.children.length;//补充条数
                

            

        

        


            


                


                

            

            


                

                    totalNum =theNewsNum+theAddNum;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    theLeadString = " ";
                

            

        

        


            


                


                

            

            


                

                    theSpaceFiller = " ";
                

            

        

        


            


                


                

            

            


                

                    runTheTicker();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 基础函数
                

            

        

        


            


                


                

            

            


                

                    function runTheTicker(){
                

            

        

        


            


                


                

            

            


                

                    if(theNewsState == 1){
                

            

        

        


            


                


                

            

            


                

                    if(CurrentPosion<theNewsNum){
                

            

        

        


            


                


                

            

            


                

                    setupNextNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    setupAddNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    CurrentPosion++;
                

            

        

        


            


                


                

            

            


                

                    if(CurrentPosion>=totalNum||CurrentPosion>=1){
                

            

        

        


            


                


                

            

            


                

                    CurrentPosion=0;//最多条数不超过num_gun条
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    if(theCurrentLength != theNewsText.length){
                

            

        

        


            


                


                

            

            


                

                    drawNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    closeOutNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 跳转下一条新闻
                

            

        

        


            


                


                

            

            


                

                    function setupNextNews(){
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = theCurrentNews % theNewsNum;
                

            

        

        


            


                


                

            

            


                

                    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
                

            

        

        


            


                


                

            

            


                

                    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.href = theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews++;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    function setupAddNews() {
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = theCurrentNews % theAddNum;
                

            

        

        


            


                


                

            

            


                

                    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
                

            

        

        


            


                


                

            

            


                

                    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.href = theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews++;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 滚动新闻
                

            

        

        


            


                


                

            

            


                

                    function drawNews(){
                

            

        

        


            


                


                

            

            


                

                    var myWidget;
                

            

        

        


            


                


                

            

            


                

                    if((theCurrentLength % 2) == 1){
                

            

        

        


            


                


                

            

            


                

                    myWidget = theWidgetOne;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    myWidget = theWidgetTwo;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength++;
                

            

        

        


            


                


                

            

            


                

                    setTimeout("runTheTicker()", theCharacterTimeout);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 结束新闻循环
                

            

        

        


            


                


                

            

            


                

                    function closeOutNews(){
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 1;
                

            

        

        


            


                


                

            

            


                

                    setTimeout("runTheTicker()", theNewsTimeout);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    window.onload=startTicker;