今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)文本特效，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的新河網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1、標(biāo)題跑馬燈

圖示效果：

源代碼：

 
 
 


 
  
   
 標(biāo)題欄上實(shí)現(xiàn)的文字跑馬燈
  
 


  var msg="  "+" 這是使用JavaScript在標(biāo)題欄上實(shí)現(xiàn)的文字跑馬燈效果";//加空格是為了讓別人看清楚這段話，否則運(yùn)行太快了，看不清楚。
  var interval = 100;
  var maxlen = 80;
  var seq=maxlen;
  var len
  len = msg.length;
  function Scroll()
  {
   document.title=msg.substring(seq, len);
   seq++;
   if(seq >= len)
   {
    seq = 0;
   }
   window.setTimeout("Scroll();", interval );
  }
  Scroll();
 

2、網(wǎng)頁(yè)內(nèi)容跑馬燈

這里介紹了一些常用的跑馬燈效果，代碼來(lái)自//www.jb51.net/article/8005.htm

效果圖如下：

源代碼：

 
 


var Mes=new Array();
Mes[0]="創(chuàng)新互聯(lián)歡迎你！ ";
Mes[1]="感謝你關(guān)注創(chuàng)新互聯(lián)教程 ";
Mes[2]="網(wǎng)頁(yè)特效　之　跑馬燈效果大全 ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}




滾動(dòng)的文字
表示雙向移動(dòng)
表示運(yùn)動(dòng)方向向左
彈來(lái)彈去跑馬燈!
表示運(yùn)動(dòng)方向向左

帶有超鏈接的跑馬燈!點(diǎn)我試試？
還有一條呢!點(diǎn)我試試？



參數(shù)
用法介紹


behavior=scroll, slide, alternate
跑馬方式：循環(huán)繞行，只跑一次就停住，來(lái)回往復(fù)運(yùn)動(dòng)


direction=left,right
跑馬方向：從左向右，從右向左


loop=100
跑馬次數(shù)：循環(huán)100次，如不寫默認(rèn)為一直循環(huán)


width=100%,height=200
跑馬范圍：寬為100%，高為200像素


scrollamount=20
跑馬速度：數(shù)越大越快


scrolldelay=500
跑馬延時(shí)：毫秒數(shù)，利用它可實(shí)現(xiàn)躍進(jìn)式滾動(dòng)


hspace=20，vspace=20
跑馬區(qū)域與其它區(qū)域間的空白大小


bgcolor=#00FFCC
跑馬區(qū)域的背景顏色

3、彩色文字的順序閃爍效果

文字以某種色彩顯示，順序劃過(guò)每一個(gè)字符。當(dāng)然也可以每次輪完一遍，就改變一種顏色。代碼實(shí)現(xiàn)很簡(jiǎn)單，其實(shí)就是給要改變的字符，添加一個(gè)標(biāo)簽，在設(shè)置顏色就可以，最后在定時(shí)調(diào)用改變的顏色的程序即可。效果圖如下：

源代碼：

  
   
   
   
  

 

  
tkgeagteewevbnmkj
  
tkgeagteewevbnmkj
 


  //獲取兩個(gè)div
  var str=document.getElementsByTagName("div")[0];
  var str2=document.getElementsByTagName("div")[1];
  var j=0,i=0,k=0;
  var color=["blue","red","yellow","#cccccc"];
  //每次只改變一個(gè)字符的顏色
  function changeCharColor()
  {
   var div=str.innerText;
   var len=div.length;
   if(j"+div.charAt(j)+""+div.substring(j+1,len);
    j++;
   }
   else{
    j=0;
   }
  }
  //改變一段字母的顏色，每次增加一個(gè)字母
  function changeColor2(){
   var div=str2.innerText;
   var len=div.length;
    if(i<=len) {//注意小于等于，因?yàn)閟ubstring的截取的時(shí)候，不包括第二個(gè)參數(shù)指定的位置。
    str2.innerHTML=""+div.substring(0,i)+""+div.substring(i,len);
    console.log(str.innerHTML);
    i++;
   }
   else{
    i=0;
    k++;
   }
   if (k==3){k=0;}
  }
  //定時(shí)調(diào)用
  setInterval("changeCharColor()", 100);
  setInterval("changeColor2()", 150);//遞歸調(diào)用
 

看完上述內(nèi)容，你們對(duì)使用JavaScript怎么實(shí)現(xiàn)文本特效有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

標(biāo)題名稱：使用JavaScript怎么實(shí)現(xiàn)文本特效-創(chuàng)新互聯(lián)
文章來(lái)源：http://www.xueling.net.cn/article/cshsei.html