2012-10-20 来源:网络
【实例名称】
文字跳动特效
【实例描述】
本例的文字跳动特效主要是为了增添网页的特色,实现类似于用凸透镜浏览文字的效果。
【实例代码】
<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中,从而实现跳动的效果。
【源码下载】