當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS代碼實現文字跳動特效

JS代碼實現文字跳動特效

2012/10/20 16:57:45作者：佚名來源：網絡

移動端

【實例名稱】

文字跳動特效

【實例描述】

本例的文字跳動特效主要是為了增添網頁的特色，實現類似于用凸透鏡瀏覽文字的效果。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<script language="JavaScript">
function nextSize(i,incMethod,textLength)//獲取隨機字體大小的方法
{
    if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
    if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
 output = "";
 for (i = 0; i < text.length; i++)
 {
  size = parseInt(nextSize(i +dis,method,text.length));   //獲取隨機的字體大小
  output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
 }
 myDiv.innerHTML = output;                   //動態輸出指定字體大小的文本
}
function doWave(n) 
{   
 theText = "歡迎光臨";                       //要瀏覽的文本
 sizeCycle(theText,1,n);                     //實現跳動的方法  
 if (n > theText.length) {n=0}               //如果文本顯示完畢,則從頭再開始
 setTimeout("doWave(" + (n+1) + ")", 50);   //不斷調用該方法-實現循環作用
}
</script>
</head>
<body bgcolor="#fef4d9" onload=doWave(0);>
<div ID="myDiv" align="center">
</div></body>
</html>

【運行效果】

運行效果

【難點剖析】

本例的重點其實是動態改變文字的字體大小。本例通過“nextSize”方法獲取隨機的字體大小，然后設置文本中每個字的大小不同，通過“innerHTML”屬性，將文本動態顯示在div中，從而實現跳動的效果。

【源碼下載】

本實例JS代碼下載

標簽：文字

上一篇：JS代碼實現文字滑動效果
下一篇：利用PS濾鏡及圖片合成制作日食效果

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频