JavaScript模仿动网论坛的打字机效果

2008-11-08 10:24:00 | 【

文字逐个出现,就好象打字机打字一样

查看全部代码 View Code

在网页<body>区显示效果的地方添加以下代码

<SCRIPT language=JAVAscript>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序,请保留此声明
         * 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
         ******************************************************/
    
 // ------ 定义全局变量
 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;
</SCRIPT>
<a href="" id="hottext"></a>
<div id=incoming style="DISPLAY: none;float:left">
 <div id=AllNews >
   <div id=0>
   <div id="Summary" style="border:1px solid red">
    <a href="http://www.sharejs.com" target="_blank"><font><b>欢迎访问ShareJS.com,分享JavaScript的快乐</b></font></a>
</div>
   <div id=NewsLink  ></div>
  </div>
  </div>
 <div id=AddNews height="25"></div>
</div>

下载"JavaScript模仿动网论坛的打字机效果"

  • 本地下载
  • 本地下载2

相关资源