JS+DIV+CSS实现以打字效果逐条显示的公告栏-广告代码-懒人建站

JS+DIV+CSS实现以打字效果逐条显示的公告栏

JS+DIV+CSS结构，实现以打字效果逐条显示的公告栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD>
<title>JS实现以打字效果逐条显示的公告栏_懒人建站</title>
<meta name="keywords" content="国外网页设计欣赏,CSS导航菜单,FLSH焦点图,网页特效" />
<meta name="description" content="懒人建站为您提供-JS广告代码，CSS导航菜单，FLSH焦点图片代码，国外网页设计欣赏与模板和CSS技巧

。" />

<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<STYLE type=text/css>A:visited { 
    COLOR: #5a614a; TEXT-DECORATION: none 
} 
A:link { 
    COLOR: #5a614a; TEXT-DECORATION: none 
} 
A:hover { 
    LEFT: 1px; FONT-FAMILY: 宋体; POSITION: relative; TOP: 1px 
} 
BODY { 
    FONT-SIZE: 9pt; MARGIN: 0px; TEXT-ALIGN: left 
} 
</STYLE>

<SCRIPT language=JAVAscript> 
<!-- 
// ------ 定义全局变量 
       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     = 3000;//新闻间隔时间 
          theWidgetOne        =  "_";//新闻前面下标符1 
          theWidgetTwo        =  "-";//新闻前面下标符 
          theNewsState       = 1; 
          //theNewsNum        = document.body.children.incoming.children.NewsNum.innerText;//新闻总条数 
          //add by lin 
     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>=5) CurrentPosion=0;  //最多条数不超过5条 
     } 
          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.NewsLink.innerText;           
          theCurrentLength = 0; 
          document.all.hottext.href = theTargetLink; 
          theCurrentNews++; 
    } 
       function setupAddNews() 
       { 
          theNewsState = 0; 
     theCurrentNews = theCurrentNews % theAddNum;      
          theNewsText = document.getElementById("incoming").children.AddNews.children

[theCurrentNews].children.Summary.innerText; 
          theTargetLink = document.getElementById("incoming").children.AddNews.children

[theCurrentNews].children.NewsLink.innerText;           
          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> 
 
<SCRIPT> 
<!-- 
document.onmouseover = domouseover; 
document.onmouseout = domouseout;

function makearray(n) { 
    this.length = n; 
    for(var i = 1; i <= n; i++) 
        this[i] = 0; 
    return this; 
}

hexa = new makearray(16); 
for(var i = 0; i < 10; i++) 
    hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) { 
    if (i < 0) 
        return "00"; 
    else if (i > 255) 
        return "ff"; 
    else 
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setbgColor(r, g, b, element) { 
      var hr = hex(r); var hg = hex(g); var hb = hex(b); 
      element.style.color = "#"+hr+hg+hb; 
}

function fade(sr, sg, sb, er, eg, eb, step, direction, element){ 
    for(var i = 0; i <= step; i++) { 
setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+

")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " *

((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 
    } 
}

function fadeout(element) { 
           
    fade(255,153,0, 0,0,0, 30, 1, element); 
}

/*------------------=[fadein]=---------------------- 
||Fades the text from one color to another color   || 
||when the mouse moves over the link.              || 
||-------------------------------------------------*/

function fadein(element) {

fade(0,0,0, 255,153,0, 18, 1, element); 
} 
/*ignore this >>>>*/ 
function fadeIn2(id){ 
    fade(255,255,255, 88,118,152, 25, 1, id); 
}

function fadeOut2(id){ 
    fade(88,118,152, 255,255,255, 29, 1, id); 
} 
/*<<<<< stop ignoring =)*/

// --> 
</SCRIPT>

<META content="MSHTML 6.00.3790.4064" name=GENERATOR></HEAD> 
<BODY bgColor=#fdf4bc> 
<DIV id=visible><FONT color=#ff6910>一句话公告：<A class=fade id=hottext  
href="http://www.jb51.net/" target=_blank name=a></A></DIV> 
<DIV id=incoming style="DISPLAY: none"> 
<DIV id=AllNews> 
<DIV id=1> 
<DIV id=Summary>1.懒人建站为您提供-国外网页设计欣赏,CSS导航菜单,FLSH焦点图,网页特效 -  
2009-11-1</DIV> 
<DIV id=NewsLink>fq/qpxt/</DIV></DIV> 
<DIV id=2> 
<DIV id=Summary>2.懒人建站为您提供-JS广告代码，CSS导航菜单，FLSH焦点图片代码，国外网页设计欣赏与模板和CSS技巧。 -  
2009-11-1</DIV> 
<DIV id=NewsLink>flash/zazhi/</DIV></DIV> 
<DIV id=3> 
<DIV id=Summary>3.懒人建站为您提供-JS广告代码，CSS导航菜单，FLSH焦点图片代码，国外网页设计欣赏。 - 2009-11-1</DIV> 
<DIV id=NewsLink>/fq/</DIV></DIV> 
<DIV id=4> 
<DIV id=Summary>4.懒人建站-解放出你的部分写代码时间来思考更高层次的设计。-  
2009-11-1</DIV> 
<DIV id=NewsLink>images/yewu.htm</DIV></DIV> 
<DIV id=5> 
<DIV id=Summary>5.懒人建站-http://www.51xuediannao.com/js/→</DIV> 
<DIV id=NewsLink></DIV></DIV></DIV> 
<DIV id=AddNews></DIV></DIV>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>懒人建站为您提供-各种bolg制作技巧，HTML技巧，CSS技巧和CMS使用技巧</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</BODY></HTML>

代码说明:

JS+DIV+CSS实现逐条显示的公告栏，

以打字效果，

DIV+CSS结构

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2009-11-11|热度：次|收藏|报错

相关代码

相关文章